I have a navBar with a drop-down. When you select either of the links on the drop-down the menu moves slightly to the left (+- 10px). You can see it a little better in mobile view.
<nav class="navbar navbar-inverse navbar-fixed-top">
<!-- add navbar-fixed-top -->
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href=""> <img src="" alt=""> </a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><i class="fa fa-home" aria-hidden="true"></i> </li>
<li> about </li>
<li class="dropdown">
overview <span class="caret"></span>
<ul class="dropdown-menu">
<li>cost breakdown</li>
<li>project progress</li>
</ul>
</li>
<li> photos </li>
<li> faq </li>
<li> news </li>
<li> contact </li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!-- container-fluid -->
</nav>
https://jsfiddle.net/art852/uyg1otg5/12/
The shifting happens because you have a vertical scrollbar due to content overflow. If you add the following it will remove the shift.
#navbar {
overflow-y:hidden;
}
https://jsfiddle.net/uyg1otg5/18/
Related
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
I am a bit stuck with how to properly align a button on a nav-bar, where the button is wrapped inside a form.
Here is the markup I have (and here is a jsfiddle if its easier: https://jsfiddle.net/darrelltunnell/DTcHh/24292/)
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-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>
<span class="navbar-brand">
Test
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>One </li>
<li>Two </li>
<li>Three </li>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">
<span class="fa fa-user"></span>
Daz
</a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">Logout</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
The problem is that both the anchor and the button (within the form) are not aligning correctly with the other nav items.
Any pointers much appreciated.
You should use <ul> tag like this:
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<ul>
<li>Item3</li>
<li>Item4</li>
</ul>
Your Code:
<nav class="navbar navbar-inverse navbar-fixed-top gcs-navbar" id="main-menu">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed main-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>
<span class="navbar-brand"> Test </span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul data-toggle="collapse" data-target="#navbar.in" class="nav navbar-nav navbar-right">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
<form asp-area="" asp-controller="Account" asp-action="LogOff" method="post" id="logoutForm" class="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>
<a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage"> <span class="fa fa-user"></span> Daz </a>
</li>
<li>
<button type="submit" class="btn btn-link navbar-btn navbar-link" style="border: none;padding-right:20px">
Logout
</button>
</li>
</ul>
</form>
</ul>
</div>
</div>
</nav>
Is there anyone that has used a similar menu style to Spotify? https://www.spotify.com/se/
I would like to have the menu cover whole page....
Example
Im using Bootstrap 3.
Has anyone done something similar?
You need to modify this code as you want..DEMO
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="collapse"
data-target="#example-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>
<a class="navbar-brand" href="#">menu</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dogs <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Terrier</li>
<li>Labrador</li>
<li>Pitbull</li>
<li>German Shephard</li>
<li>Chihuahua</li>
<li>Beagle</li>
</ul>
</li>
<li class="dropdown">
Cats <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Persian</li>
<li>Siamese</li>
<li>Ragdoll</li>
<li>Lion</li>
<li>Tiger</li>
</ul>
</li>
<li class="dropdown">
Primates <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Monkey</li>
<li>Lemur</li>
<li>Gorilla</li>
<li>Chimpanzee</li>
</ul>
</li>
<li class="dropdown">
Reptiles <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity "></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Boa</li>
<li>Monitor Lizard</li>
<li>Comodo Dragon</li>
<li>Iguana</li>
<li>Alligator</li>
</ul>
</li>
</ul>
</div>
</nav>
I am using Bootstrap 3, i am using top navigation bar and left side navigation bar, i want that it should work fine for mobile also, when i collapse the page from right to left then my top navigation works fine and both buttons appears but my left side navigation does not disappear, it appears and disappear on button click.
This is jsfiddle
This is the code:
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="col-md-2 col-sm-2 col-lg-2" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Instead of using just
<ul class="nav">
for the left elements use:
<ul class="nav navbar-nav navbar-left">
Fiddle: http://jsfiddle.net/FDkqT/
That fixes all your problems
I have top menu and left menu on page, I want that both should collapse on small screen, these are working fine for small but on large screen both menu don't display.
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#first">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="nav-collapse collapse" id="first">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="nav-collapse collapse" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Here is Fiddle
Please guide me what is wrong I am doing?
In order to correct the position of the links, i changed the order of the navbar elements, first the left side, then the right side ( it was not the problem, its a matter of organization). Added a division between the nav & the page title. Changed the class of the navbar items on the left to :
<ul class="nav navbar-nav navbar-left">
Instead of just
<ul class="nav">
Here is the Final Jsfiddle: http://jsfiddle.net/FDkqT/
I know its simple, but if you expand the window you will see that it works just right