Navbar items are sitting on top of each other when creating a <nav class="navbar navbar-default"> while they are meant to sit next to each other. I have followed the instructions on W3 Schools As far as I'm concerned my code is right.
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">BRAND</a>
</div>
<ul class="nav navbar-nav">
<li>about</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</nav>
</div>
Here is my Codepen
Pasting your example into bootply seems to work fine. I'd check that your script & stylesheet files are correctly included in your page.
--Edit--
I actually do see the issue after reducing the browser width match one of the smaller media queries (responsive mode). The code you're using is working correctly, but is based on an incomplete example which wouldn't collapse down to the hamburger/triple-bar icon, as Bootstrap navbar's typically do.
You might be better served to review the code example from the Bootstrap website directly: https://getbootstrap.com/docs/3.3/components/#navbar
Related
On my website, I am using the navbar-fixed-top class as per bootstrap's docs. I want my nav to stay fixed but unfortunately the position becomes relative upon viewing the page source. Here is my code.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="navId">
<li class="nav-item">
Home
</li>
<li>
Work
</li>
</ul>
</div>
</nav>
I am quite confused on this. I believe I have followed this example properly. If someone knows my error here, let me know!
One more thing. I have NOT overriden any styles of bootstrap.
<nav class="navbar navbar-default navbar fixed-top">
Just remove "-" between navbar and fixed top
I'm new to Bootstrap 3 and I'm still learning. Till now I managed to make an simple navbar with logos and links. I'm now trying to have my logo above and my navigationbar below the logo. I've used HTML breaks, but that only is spacing my bar downwords.
The code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Super Signals</a>
</div>
<br>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
This is what I have now:
This is what I want:
Add float: initial; to the navbar-header class
You can accomplish this by using float: none or float: initial which will remove the left float that is currently in effect.
from what I can see here. It's a problem of telling the browser where you want to position.
1. Use CSS
https://www.w3schools.com/css/css_positioning.asp
2. Using quick positioning classes
position-static,
position-relative,
position-absolute,
position-fixed,
position-sticky,
3. Float
float: none, float: initial
Hope this answer helps.
Use this code and style your h1 tag as your requirement
<div class="container"><h1>Super Signals</h1></div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
Any problem or question just ask in comment below my answer
In Bootstrap 3 how do I get the navbar-right to work correctly on mobile? In my project for some reason when the browser shrinks down it puts my navbar-right item on the next line.
I've tried setting pull right on it, and setting pull-left on the brand image, but no luck.
I'm assuming there is something I'm doing wrong in Bootstrap or a class I need to add. Please help.
Here is what it looks like on mobile:
Here is what I want it to look like on mobile:
On desktop it works fine.
Here is my navbar html:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
</div>
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<a class="navbar-brand" href="/apply/">Continue Application</a>
</ul>
</div>
</div>
</nav>
</header>
Please help.
Following Bootstrap 3 styling, your navbar element should show the mobile toggle button when in responsive resolution, like in this example.
If you want to have only those two elements of your interface in the same position inside a navbar element you could edit your html as follows:
<header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/assets/dot-logo-91x50.png">
</a>
<a class="navbar-brand pull-right" href="/apply/">Continue Application</a>
</div>
</div>
</nav>
</header>
But I suggest you to implement a mobile toggle button with a collapsed menu to improve your users experience.
I have been developing a webpage with bootstrap along with some additional styles. The problem is that the navbar is not collapsing in the mobile view. I think that my multiple css files are overlaping.
Can anyone suggest me the appropriate changes?
Thanks in advance.
My html and css codes are here
Try the below solutions
1.Did you include bootstrap.min.js file in your page.
Add below in your file footer and try.
<script src="js/bootstrap.min.js"></script>
OR
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2.just try change order of loading css files, load your custom css first and bootstrap last.
3.Inspect Page and check for errors(If any path misses make them correct.)
*Include "JQuery" if you miss this. Because Bootstrap JS Needs JQuery for proper working. Must load above bootstrap js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
Here is the working code:
<div class="navbar navbar-default navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="fa fa-bars color-white"></span>
</button>
<h1><a class="navbar-brand" href="index.html" style="line-height:50px" data-0="margin-top:20px;" data-300="margin-top:5px;">GrocShop
</a></h1>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
<li class="active">Home </li>
<li>Team
</li>
<li>Careers
</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the JSFiddle demo of your code
(hide the Result span of JSFiddle.net to be able to click on the nav button)
What was fixed:
A style should be defined. navbar-default was added to the div class="navbar ..." that defines the navbar.
The CSS for .navbar-toggle where disabled since they made the button to look like a dot.
I'm just getting started with Bootstrap, and am doing so by designed a page for myself from scratch. I'm still stuck on the navbar as of now.
Here's how I want it to work: On desktop/tablets, it should work just like conventional navbars, with one header element on the left and a list of option on the right. On mobile, however, instead of having the navbar collapse into a menu, I want it - all of it - to just move to another row within the navbar.
I tried making the class of the part I want to overflow to "sidebar", but the list still renders vertically, like with the collapse menu.
A friend of mine has implemented this on his site at "thepickletheory .com" (Can't add a direct link for lack of reputation), and it works really well there. He's just used a WordPress theme, however, and the code isn't in Bootstrap too, so I can't implement it myself either.
Here are some pictures that show what I'm trying to accomplish.
Navbar in desktop/tablet view
[Name] --- [Item 1] [Item 2]
Navbar in mobile view
[Name]
[Item 1] [Item 2]
Here's the code for the navbar that I've written so far, which moves the second part of the navbar to another row, but renders the list vertically (links are dummies for now):
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
Would really appreciate some help with getting this to work. Thanks!
EDIT 2:
Through some rather fortunate trial-and-error, I've stumbled upon the solution: the unordered list just has to be assigned to the .nav-pills class, and that's all it takes.
You has to specify navbar-collapse collapse here is used to enable the toggle menu in Small screens instead of showing full menu just look here
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
</div>
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap don't mind which is binded in bootstrap.js. here the source
Instead of collapse you can use bootstrap grid classes source
<div class="navbar-header col-xs-12 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<!-- here side bar menu -->
</div>
which will bind accordingly by device you are using. put col size as your need.