Relavent page here: http://marcmurray.net/test_sites/cans/#
Basically I have added an svg image into my navbar into the navbar-brand class, but it has pushed all of my navigation down and outside of itself, can anyone see what it is I am doing wrong?
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<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>
</button>
<img src="img/logo.svg">
<!-- 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>Home</li>
<li>Why Us?</li>
<li>Process</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<img src="img/logo.svg"></a></div>
You have a missing div closure there
You missing navbar-header closing </div> after logo:
<div class="navbar-header">
...
<img src="img/logo.svg">
</div> - add this
Three opened divs but two closed divs.
Check it!
Related
bootstrap 4 Navbar scrolling to fixed top Working But when Browser reloading time same times mouse scrolling Navbar fixed not working. why not working i'm not understand?
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="Home"></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Exam Notic</li>
<li>Student List</li>
<li>Contact Us </li>
</ul>
</div>
</div>
</div>
</nav>
I am trying to put a div above navbar-fixed-top in bootstrap, but for some reason the div with its content does not show. I dont know what else to write here, it is asking for detail all is in a code
here is the code
<div class="nav-top">
<div class="container">
<div class="row">
<div class="col-xs-12">fdjfdl;ffd;fjd; fjd;ffffffffffffffffffff
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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>
<div class="navbar-brand" ><img src="images/logoa.png" alt="need to name it"></div>
</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 navbar-right">
<li class="active">Главная <span class="sr-only">(current)</span></li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>blabla</li>
<li>blablabla</li>
<li class="j">
Обо мне <span class="caret"></span>
<ul class="dropdown-menu">
<li>blu</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
remove your navbar-fixed-top class from code then you get some space to show your text.Have fun
Here is JSFiddle:https://jsfiddle.net/arifkarim/uu0n4cyk/3/
I know this is 4 years late but for anyone else stumbling upon this.
The fixed-top has a z-index of 1030, so just set your own element that you wish to be on top to z-index: 1050 (higher than 1030 at least).
I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<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>
</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>Home</li>
<li>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
There are quite a few posts here about changing the Bootstrap CSS to make the header non-responsive.
But I have two headers, only one of which I want to be non-responsive, so I don't want to change it as a class:
One header has a login form, it works fine and collapses responsively exactly how I want it to.
The other is for a logged-in user and only has one link to log out, and I want to make this non-responsive. Here's how it looks now as the browser width changes, which is obviously not ideal:
And here's the code for the header I'd like to make non-responsive:
<nav class="navbar navbar-inverse navbar-fixed-top identHeader8">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="dashboard.html">[logotype]</a>
</div>
<div id="logout_navbar">
<ul class="nav navbar-nav pull-right collapse in">
<li>
Log out
</li>
</ul>
</div>
</div>
</nav>
Thanks in advance for any help you can provide.
You can use Non-nav Links (See Docs) and place it inside the header after the navbar-brand in this example.
<p class="navbar-text">Log In</p>
You can adjust to where is needed with your own CSS rules.
See example Snippet.
body {
padding-top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">[logotype]</a>
<p class="navbar-text">Log In
</p>
</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 navbar-right">
<li>Log out
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<img src="http://placehold.it/2050x850/ff0/fff" class="img-responsive">
I am trying to learn bootstrap and so far it has been very fun. I have been stuck on this problem for a while, I want to space my navbar just two fifths of the screen. I think it will look a lot nicer if it is spaced that way but I haven't been able to find a solution. I was wondering if there is any way of doing that.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><strong>Website</strong></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You can create a css class:
.adjust-margins-container{
margin-left: 30%;
}
and then add the class to:
<div class="container-fluid adjust-margins-container">
bootply example