I have a collapsable navbar in bootstrap that is not showing correctly when collapsed. I am moving the navbar-header (which contains a navbar-brand) to the right side with pull-right. However, adding this in seems to make the navbar that is toggled sit between the toggle button and the navbar-brand.
I would like the toggled navbar to sit below the button and the brand whenever it is open.
This is the correctly formatted version, however, the Brand is not pulled over to the right
This is what is happening when I pull the Brand over
Here is the code I am using. Bootstrap version is 3.3.6
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header pull-right">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
.pos-rel{ position:relative;}
.navbar-brand{position:absolute; right:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container pos-rel">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
Try this
Try this below code:
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="pull-right" id="mobile-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
<div class="pull-right" id="com-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function () {
setNavbarBrand();
});
$(window ).resize(function () {
setNavbarBrand();
});
function setNavbarBrand() {
if (window.innerWidth <= 768) {
$('#mobile-nav').show();
$('#com-nav').hide();
} else {
$('#mobile-nav').hide();
$('#com-nav').show();
}
}
</script>
</body>
Related
I want to get my navigation to collapse down although it goes down but when I click the button again to go back up it does not work.
<div class="menu-btn-respons-container">
<button id="menu-btn" type="button" class="navbar-toggle btn-navbar collapsed" data-toggle="collapse" data-target="#main-menu .navbar-collapse">
<span aria-hidden="true" class="icon_menu hamb-mob-icon"></span>
</button>
</div>
<div id="main-menu" class="font-raleway">
<div class="navbar navbar-default" role="navigation">
<nav class="collapse collapsing navbar-collapse right-1024">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
</div>
</div>
I'm having a hard time figuring out how I can implement bootstrap 3 menu in a way such that it's right-floated and part of it collapse, e.g.:
Brand Item 1 Item 2 Item 3 Item 4
when collapsed look that way:
Brand Item 4 [Toggle menu]
I think I'm getting close, but can't make it work properly:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".menu-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="#">Brand</a>
</div>
<div class="navbar-right">
<div class="collapse navbar-collapse menu-collapse">
<ul class="nav navbar-nav">
<li>Test right-middle</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li>Test right-most</li>
</ul>
</div>
Any ideas how I can fix "test right-most" not to get pushed to next line?
Include a separate navbar-header for the non-collapsible item
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
BRAND
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<li class="navbar-text pull-left">Item 3</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</nav>
JSFIDDLE
Try to place the contents inside of a div with the class: navbar-header
So instead of declaring:
<div class="navbar-right">
Use the following class instead:
<div class="navbar-header pull-right">
I'm making an application with bootstrap and I have a nav bar, however for some reason when I resize the page the links disappear but the toggle button doesn't show.
Here is my nav bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">title</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</div>
</nav>
Any help to fix this would be greatly appreciated.
You don't currently have the toggle button in your code. Try placing the following before your collapse, and after your 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>
http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
you havent added a toggle button as i can see in your code
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">title</div>
</div>
For more details refer Navbar documentation (bootstrap)
in my case I am using bootstrap5 but class I was using old version, after changing code as below it worked for me by going though BS5 W2Schools:
<nav class="navbar navbar-expand-sm bg-dark">
<div class="container-fluid">
Recipe Book
<ul class="nav navbar-nav">
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/recipes">Recipes</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/shopping-list">Shopping List</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown" appDropdown>
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Manage<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save Data</a></li>
<li><a class="dropdown-item" href="#">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</nav>
referece:https://www.w3schools.com/bootstrap5/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
I wish to change the default color styles of the collapsing navbar after being clicked. I successeded styling it before it is collapsed but can't find how to change the colors afterward.
Exmaple from W3Schools:
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
I want my menu to be hidden and when i hover an image i would like the menu to appear. I've tried following something that i've seen here in Stackoverflow but it's not working. How do i do it only with css ?
Html:
<nav class="navbar navbar-inverse 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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
<img src="img/ea.PNG" class="img-responsive img-center" id="imgmenu">
CSS:
.navbar{
display:none !important;
}
#imgmenu:hover + .navbar{
display:block;
}
First you must place the image before the Menu , look this example (without js):
.navbar{
display:none;
margin-top: -10px;
padding-top: 10px;
position: relative;
}
#imgmenu:hover + .navbar{
display:block;
}
.navbar:hover{
display:block;
}
<div id="main-menu">
<img src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" class="img-responsive img-center" width="50px" height="50px" id="imgmenu">
<nav class="navbar navbar-inverse 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="#">Test</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</div>
</div>
</div>
</nav>
</div>