I am trying to achieve the following result in bootstrap 3.2.0, Please see the attached image. That is a logo in center and on right and left navigation links.
This is the code I am playing with…its actually copied from bootstrap default template.
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Esthetics Studio</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Life</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
</header>
I would like to ask you to enclose the code that you post within [noparse]
...
[/noparse] tags. Please click the link at the bottom of this post and read our guidelines for reporting problems and posting code. We need to see the HTML and the the CSS to see how they work together. In this case, it sounds like you have no CSS and might be trying to write your own. Cool!
Awesome…Super Awesome…thanks Paul.
Exactly what I was trying to achieve, thanks a lot. I was also trying the suggestion you gave to the similar post mentioned above.
There is only an initial 30 minute window during which posts can be edited. Just remember the code tags for you next post and everyone here will be ecstatic. .
I have five links in unordered list, and a logo in third <li> If you see the code below you will get the clear picture. What I am trying to do is to shift home, company links towards left and Services, Contact links towards right without having any impact on the logo i.e. our third <li> item means it should be unaffected by margin, padding. But I failed to do so, I have also tried the child selectors on first <li> item but when I set its margin-left:0 all remaining four <li> shifts to the left.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{height:400px; width:40%; margin:auto; border:dashed #000 1px;}
ul{text-align:center; margin:0px; padding:0px; background-color: #F90; float:left; width:100%;}
ul li {list-style:none; display: inline-block; margin:15px; border: solid 1px #FC0;}
ul li a {display:block; padding:10px; text-decoration:none; color:#333;}
ul li a:hover {background-color:#333; color:#FFF;}
ul li:nth-child(3) {border:none;}
img{ width:100%;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Comapny</a></li>
<li><a><img src="http://placehold.it/200x100"></a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Are you trying to center the logo between “home and company” and “services and contract” list item pairs? I’m not clear about what the end result is supposed to look like.
Oh no, logo is already in center…that’s not the problem. I want more space between “home and company” and “Service and Contract”, Please see the attached image for more details. I don’t know is it possible or not but my original design demands that.
Your sample code didn’t render anything like that at all. Did you test it?
I went back and looked at Paul’s code and now I see where you are coming from. So the question is: do you want just the end buttons to move further away from their sibs, or do you want a little more space between all of the objects… the buttons and the logo?
The margin in this block of code sets the space between the list item elements: (line 21 in Paul’s code)
.mynavbar .nav li {
display:inline-block;
float:none;
margin:0 20px;
vertical-align:middle;
}
As it sits, there are 40px between each element.
Assuming you want the end buttons only to move further away from the middle, AND assuming you are not interested in IE8, you can add this code just after Paul’s code to spread the first and last buttons a bit. By equally adjusting the two non-zero numbers, you can set that spread.
Yes I want just the end buttons to move further away from their sibs. I have applied the CSS you have provided but its having the same impact shifting other <li> items also. I think its not possible, because when we apply child selectors to first child it will impact the other child’s also at-least true with the margin and padding.
What you are asking to do is very possible and very easy. You need to understand how to address selectors and specificity. It sounds like the previous code is being applied too broadly.
Let’s try a different method of targeting just those end list items.
Assign a classname to the left end and right end button list items, like this:
Tried this but same result. Might be I am doing something wrong. My website is in very initial stage and I am first time using bootstrap, you can see actual page here http://www.gkdesign.byethost12.com/# . Please also see the attached Image, so you will get complete idea about the home page I have.
The code that I gave you with the classnames, which you have included in the test link, is working exactly as I would expect it to. If the margin values are commented out, the end buttons move closer their sibs.
Epiphany! Now I see that the menu design “breaks” at widths narrower than 1170px. It will not “work” in a fluid layout. At the narrowest widths, that approximates the look of the code sample that you included above (post #8) and my screen shot (post #11). If you are trying to create a responsive menu bar within the bootstrap framework, then a bootstrap person should probably pitch in. I am not familiar with the boostrap class system for responsive design.
In preparation for that, you should have a clear picture in your mind of how the menu should look at the different breakpoints so you will know how to code it. It would be helpful to have a drawing showing how the menu should change at each of the breakpoints, too.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/bootstrap-theme.css">
<!--<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/custom.css">-->
<style>
/* CSS Document */
.top {
text-align:center;
background-image:url(http://www.gkdesign.byethost12.com/images/menu_sep.png);
background-repeat: repeat-x;
background-position:50% 50%;
}
.top .container {
width:auto;/* remove this if you want 1170px width*/
}
.mynavbar .nav {
float:none;
width:100%;
display:table;
}
.mynavbar .nav li {
display:table-cell;
float:none;
vertical-align:middle;
text-align:center;
padding:0;
margin:0;
}
.mynavbar .nav li a {
background-repeat:no-repeat;
width:121px;
height:62px;
line-height:62px;
margin:0;
padding:0;
float:none;
display:block;
background:url(http://www.gkdesign.byethost12.com/images/bg-link.png) no-repeat 0 0;
}
.mynavbar .nav li a:hover {
background-color:red;
}
.mynavbar .nav li.mylogo a, .mynavbar .nav li.mylogo a:hover {
background:none;
}
.mynavbar .nav li.mylogo, .mynavbar .nav li.mylogo a {
height:auto;
width:auto
}
.mynavbar .nav li.mylogo a img {
width:100%;
height:auto;
vertical-align:middle;
max-width:466px;
min-width:230px;
margin:10px 0;
}
.navbar-brand {
display:none
}
@media screen and (max-width:768px) {
.top {
background-image:none
}
.navbar-brand {
display:inline
}
.mynavbar .nav li {
display:block;
margin:0 auto;
width:auto;
border-bottom:1px solid #fff;
}
.mynavbar .nav li a {
border-radius:0;
display:block;
margin:0 auto;
}
.mynavbar li.mylogo {
display:none
}
}
</style>
<title>My website</title>
</head>
<body>
<header>
<nav class="navbar top navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="#" class="navbar-brand">My Company Logo</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="leftendbutton"><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li class="mylogo"><a href="#"><img src="http://placehold.it/466x62"></a></li>
<li><a href="#">My Work</a></li>
<li class="rightendbutton"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<!-- Bootstrap core JavaScript================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://www.gkdesign.byethost12.com/js/jquery.min.js"></script>
<script src="http://www.gkdesign.byethost12.com/js/bootstrap.min.js"></script>
</body>
</html>
Remember that your custom CSS should follow the bootstrap css otherwise you won’t over-ride it.
Don’t change any of the standard bootstrap classes but add your own class when you want to modify existing rules and in that way you leave the structure intact for other elements using those defaults.
Thank you Ronpat and Paul. Really grateful for the time you gave me. I will try to follow the advices you gave. When I am done I will share the link of the website with you guys for your feedback, I don’t know when it will be done.
I have two questions to Paul
Are you the same Paul O’Brian who wrote “Ultimate CSS Reference”? I downloaded it yesterday
Please help me to Changing the collapsed mobile navbar breakpoint in Bootsrap. I want to change default value to lower than 992px so whenever the screen size goes below 992px it should collapse.
This is what bootstrap say about it, I don’t have much knowledge about LESS on how to make changes, compile etc.
The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).
