WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > problems with nav bar and bootstrap

Reply
  Thread Tools Display Modes
Old 19th October 17, 03:11 AM   #1
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 85
Default problems with nav bar and bootstrap

its been nearly 3 years since I have sat down and programmed a webpage. My design degree took me someplace else. now my current work place wants me to redo their webpage.

I am using bootstrap and I want to create an responsive navbar that has our companies logo in the center of the nav. much like this page, http://theark.org/

I am hell bent on doing this only using CSS and HTML. no script or jquery.

I thought I found a place that showed me how here... https://bootsnipp.com/snippets/featu...brand-centered.

However trying to implement it is not working. Here is what I havel.

HTML Code:
<!DOCTYPE html>
<html lang="en">
	
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	<link rel="stylesheet" href="css/main.css">
</head>

<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="navbar-brand navbar-brand-centered">
					LOGO
				</div>
			</div>
			
			<div class="collapse navbar-collapse" id="navbar-brand-centered">
				<ul class="nav navbar-nav">
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
			</div>
		</div>
	</nav>
</body>

</html>
Code:
@media screen and (min-width:575px){
    .navbar-brand-centered {
        position: absolute;
        left: 50%;
        display: block;
        width: 160px;
        text-align: center;
        background-color: #fff;
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
    }
				
}
Please help me. I have no idea why its not working. I did everything the same. I am sure its some kind of thing I just do not understand or forgot.
hmds is offline   Reply With Quote
Old 20th October 17, 02:11 AM   #2
hmds
WLC Lover
 
Join Date: Jul 2009
Location: Seattle
Posts: 85
Default Re: problems with nav bar and bootstrap

I figured it out. It was a different version of bootstrap. I didn't realize how much it has changed in 3 years.
hmds is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:13 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.