Dears I am working on www site. In normal desktop mode everything works fine but when I am changing it to responsive mode menu dissapears.
Case is connected with module breadcrumbs. When I turn the module off it works perfectly.
Looking for help.
Here is my code:
Navbar section:
<body>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<!-- Jumbotron -->
<div class="jumbotron">
<jdoc:include type="modules" name="slider" style="xhtml" />
<!-- Static navbar -->
<nav class="navbar navbar-justified">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<jdoc:include type="modules" name="nav2" style="xhtml" />
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Thank you in advance.
may be you have already button included but try to locate button by apply css like following: to '.navbar-toggle' class
.navbar-toggle { background-color: red;}
actually your navbar-button color may be inherit css of your site so if you assign custom css like below you can see button like standard button.
.navbar-toggle {
background: transparent none repeat scroll 0 0;
border: 1px solid #ccc;
}
.navbar-toggle span {
border: 1px solid #ccc;
}
Related
I have had a search and cannot find this exact problem so I hope the question is not duplicate.
First time users of Bootstrap 3.
From reading here and the bootstrap documentation I believe the navbar should have its own container such as:
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="/index.html">My Site</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span> Home</li>
<li><span class="glyphicon glyphicon-list-alt"></span> Services</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
<li><span class="glyphicon glyphicon-envelope"></span> Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">content goes here and this content is under the navbar</div>
</div>
The body of the page then has its own container. Is that Correct?
I have done that and then added a row but the first row content is under the navbar.
Have I missed something like a class that I should add to the first row to ensure it starts below the navbar and not after it?
I found a similar question where the answer was to ensure the navbar had "navbar-fixed-top" but I already have that.
Read documentation carefully.
According to Bootstrap navbar docs:
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body {
padding-top: 70px; // Your navbar height
}
Make sure to include this after the core Bootstrap CSS.
If I understand your problem correctly that you want content below the navbar just write
navbar-fixed
instead of
navbar-fixed-top
like this
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-
fixed"role="navigation">
it will work
see this fiddle fiddle
are you looking for this ???
This is caused by the Bootstrap class fixed-top, Fixed navbars use position: fixed, which pulls the Nav from the normal flow of the DOM.
For this to have an effect, having your content below the Navbar not overflow unto the Navbar, BootStrap Docs>> https://getbootstrap.com/docs/4.5/components/navbar/
Under the #Placement section, advise you to give custom CSS to the body.
Add some padding to the <body style="padding: somepadding"> element.
I need to create a responsive nav with 2 rows of links. I would prefer to use bootstrap since it's already being used on the site. Any help to point me in the right direction would be greatly appreciated!
What I need it to look like
Just create something like this:
<nav>
<div class="container">
<div class="row">
<div class="col-md-*">
</div>
</div>
<div class="row">
<div class="col-md-*">
</div>
</div>
</div>
</nav>
Also just take a look at bootstrap's docs. Here is the link to Bootstrap's site
You need to spend some time looking at Bootstrap Navbar section also spend some time hacking around the examples and you will soon get the hang.
If you want a BIG, deep menu have a look at Yamm (yet another mega dropdown menu) or something similar. There are lots out there just search for bootstrap menus or dropdown menus... But the basic nav is very flexible.
After searching around for several hours, I was able to find a few different sources that ended up helping me figure it out.
Here's what my code ended up looking like. It's not perfect yet, but almost there.
Thanks everyone!
#nav-div { /*This is the div that wraps the entire logo and nav content*/
width:100%;
position: fixed;
top:0;
left:0;
z-index: 10;
margin: 0;
padding:0;
}
#nav-wrapper { /*This is the div that sizes the nav down to a col-md-9*/
padding:0;
margin:0;
}
#nav-container{
padding:0px;
}
#nav-top-row {
background-color: #6D6E70;
color: #fff;
padding: 0px 10px;
}
#nav-top-row a {
color:#fff;
padding-top:5px;
padding-bottom:5px;
font-size: 12px;
}
#nav-top-row a:hover {
background-color: #CCCCCC;
}
#nav-bottom-row {
background-color: #009578;
padding:0px 10px;
}
#nav-bottom-row a {
color:#fff;
}
#nav-bottom-row .dropdown-menu li {
background-color:#00806B;
}
#nav-bottom-row .dropdown-menu li a:hover {
background-color:#009578;
}
#nav-bottom-row li.dropdown.open a.dropdown-toggle {
background-color:#00806B;
}
#logo {
margin-top:35px;
width:90%;
max-width:250px;
margin-right:auto;
margin-left:auto;
}
#logo-div {
padding:0px;
background:rgba(255,255,255,.8);
}
.push-down { /*invisible div with no content that pushes down the main body content*/
margin-top:75px;
}
<div id="nav-div"class="">
<div id="logo-div" class="col-md-3">
<a href="#">
<img src="HM-Logo_Grn.png" id="logo" class="img img-responsive">
</a>
</div>
<div id="nav-wrapper" class="col-md-9">
<!-- Fixed navbar -->
<nav id="full-nav" class="navbar navbar-default">
<div id="nav-container" 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="#">Project name</a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<div id="nav-top-row" class="row">
<ul class="nav navbar-nav navbar-right ">
<li>SERVICES</li>
<li>ACCESS REPORT</li>
<li>REQUEST INSPECTION</li>
</ul>
</div>
<div id="nav-bottom-row" class="row">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
COMPANY <span class="caret"></span>
<ul class="dropdown-menu">
<li>PRESS RELEASES</li>
<li>NEWSROOM</li>
<li>AWARDS</li>
<li>MEDIA ASSETS</li>
</ul>
</li>
<li>RESOURCES</li>
<li>BUYERS</li>
<li>SELLERS</li>
<li>AGENTS</li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
</div>
<div class="push-down"></div>
I'm using Bootstrap 3 and i want to change the background color and hover state for the links for .navbar-inverse. I tried every single thing and classes, without any luck. Its still showing the same dark gradient.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">
<img src="images/logo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hotel">Hotel</li>
<li>Rooms & Suites</li>
<li>Reservation</li>
<li>Activities</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- End Of Navigation -->
Your browser's developer tools can easily help you to find the correct selectors to use. Right Click > Inspect Element
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
color: red;
background: green;
}
DEMO
Double navbar-brand to get both text and logo seems to work perfectly. However, is it easy to remove the hover-hilite for the text brand? My links and drop downs do stuff, but I do not want functionality for clicking on the brand title. The hover is misleading.
<nav class="navbar navbar-inverse navbar-fixed-top role=navigation">
<div id="navbar-container" class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- is it possible to turn off the hover/highlight for the text brand? -->
<a class="navbar-brand" href="#">Codeshelf</a>
<a class="navbar-brand" href="#"><img src="favicon.gif" width="24" height="24"></a>
</div>
<!-- links, dropdowns -->
</div><!-- /.container -->
</nav>
You can disable the text brand hover by adding the following CSS and making sure it comes after the core bootstrap CSS file.
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
background-color: transparent;
color: #999999;
}
That should do the trick! here is a FIDDLE
The solution of Amir5000 has not worked for me.
You can also fix this with this:
<a class="navbar-brand" href="#" style="background-color: transparent !important;">Codeshelf</a>
<a class="navbar-brand" href="#" style="background-color: transparent !important;"><img src="favicon.gif" width="24" height="24"></a>
Set a manual inline CSS fix with !important to overwrite any other CSS files that modify this setting.
Is it possible in bootstrap 3 to center brand name in the middle of the menu item? For example there is four menu item, i want two items on the left side, and two on the right side and brand name in the middle of these two menu links. Thnaks in advance for the help.
Step 1 Wrap a <div class="pull-left"> around the two icons you want on the left
Step 2 move this div before the <a class="navbar-brand"
Step 3
Wrap a <div class="pull-right"> around the two icons you want on the right. Make sure this div follows the navbar-brand
This method can help you, however it is best if you post the relevant code here.
Hope this helps!
You can use the nav-justified class...
<div class="navbar">
<ul class="nav nav-justified">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Brand</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Demo: http://bootply.com/105175
Do it like my code. Get the anchor tag with navbar-brand out of the navbar-headerand place it after the closing div. like in the code below.
navbar code
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Left</li>
<li>Left</li>
</ul>
</div>
</nav>
Place this code into your css file
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
mar
}
Here is the link to the working example
http://www.bootply.com/98314
You can use a much simpler approach too, just setting a percentage:
.navbar-brand {
position: absolute;
left: 50%;
}
Side Note: I haven't tested with IE. Usually I don't like percentages, but... it works!