I have the following HTML for my menu
<nav id="site-navigation" class="main-navigation navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-inner">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav-menu" aria-expanded="false">
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
This is the HTML as Bootstrap suggests u use so the menu wil be responsive when resizing. Currently it looks like this
The problem is that i want the <li> items to justify depending on the width.
Bootstrap has .nav-justified for this but when I do that is doesn't show properly and it floats all the <li> items to the left.
That looks like this
How can I make the menu items justify?
Replace the navbar-nav class on the ul.nav element with nav-pills (or nav-tabs).
<ul class="nav nav-pills nav-menu" aria-expanded="false">
<li>Home</li>
<li>Portfolio</li>
<!-- etc. -->
</ul>
See: http://getbootstrap.com/components/#nav
Yep i had this problem before, all you have to do is change the % width of the class, you have to specify the width as the default has the width at 1%
.nav-justified>li {
display: table-cell;
width: 15%;
}
Related
When I shrink the window, I want the menu to stay on the same line as the logo in medium screen. Right now it's stacking like this Link to image. How do I fix it?
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li>Guides</li>
<li>Courses</li>
<li>Tutorials</li>
<li>Top Authors</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li>Login</li>
<li>Sign Up</li>
</ul>
<!--collapse navbar -->
Hard to say because there is no CSS posted, but you can generally use inline-block to position the elements on the same line. Roughly:
.navbar-header {
display:inline-block;
vertical-align:middle;
width:30%;
text-align:left;
}
.nav {
display:inline-block;
vertical-align:middle;
width:65%;
text-align:right;
}
It maybe due to some discrepancy in adhering to bootstrap standard navbar. Below is a snippet implementing your code, but I applied it to the template provided in the Bootstrap navbar documentation, please let me know if you face any issues.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</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 hidden-xs">
<li>Guides</li>
<li>Courses</li>
<li>Tutorials</li>
<li>Top Authors</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</nav>
JSFiddle Demo
I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.
I am using the bootstrap navigation for my menu.
This is a screenshot of the page (edited):
The Jquery code: - external file
#media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
.primary {
color: orange !important;
font-size: 14px;
}
}
The color change is for testing sizes.
The HTML: - navigation only
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
What have I missed?
How I can I solve my issue?
Any help would be appreciated.
Thanks
One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
i am a little new to bootsrap, and I have tried everything for the UL class to collapse but its not collapsing when re sizing the view port. Below is the code that I have wrote.
Any help would be really appreciated. Thank you!
<nav class="navbar navbar-default navbar-static-top' role='navigation' ">
<div class="fluid" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li>Projects</li>
<li>Freelancer</li>
<li>Inbox</li>
<li>My Account </li>
</ul>
</div>
</div>
</nav>
Never mind guys I just found out why. I needed to wrap the following div element around the UL
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
The code looks like this ..
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>Freelancer</li>
<li>Inbox</li>
<li>My Account </li>
</ul>
</div>
<!---header and Navigation--->
<header>
<nav class="navbar navbar-defaault navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><span class="subhead">Jeremy Williams</span></a>
</div><!---navbar-header--->
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About Me</li>
<li>What I do</li>
<li>My work</li>
</ul>
</div><!---collapse navbar-collapse--->
</div><!---Container--->
</nav>
<header>
I'm not sure if I'm missing something but there is something there and if you click it it works but you just can't see the button that is to be clicked.
I think you mean the hamburger button that appears when the screen is small. The three lines are created with <span class="icon-bar"></span> part of the code. They are white, which is why you cannot see them, but they are there (try clicking the top right on small screen). Use CSS to change either the nav the background or the icon-bar.
.icon-bar {
background-color:#FF0000 !important;
}
see the results here: bootply
I am using bootstrap and smoothscroll for my one page website. I am unsure how to get the section in the navbar to become active though if someone scrolls to it - any help on this? I know how to get it to highlight when clicked but not sure about position
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- nav bar -->
<div class="navbar-brand"><b>Merisa Lee</b></div>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Resume</li>
</div><!--/.nav-collapse -->
</div>
</div>