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!
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.
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;
}
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
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.
How to?
Fixed navbar at center, but without background color at the sides.
The width of the navbar should be as that of the container and then the background color of the navbar to the sides of the container (which contains it) you should not see.
Any idea?
Furthermore the navbar must downsize at the resize of the width of the container, and then of the page: so rensponsive navbar!
How to?
Thanks in advance.
Fix the default navbar from: http://getbootstrap.com/examples/navbar/
wrap the navbar in its own .container div and wrap this div in an other div you fix:
#fixme {position: fixed;left: 0;right: 0; top:0;}
/* prevent overlap */
body{padding-top:70px;}
html
<div id="fixme">
<div class="container">
<!-- your navbar here -->
</div>
</div>
Other example One way to do this (there will be many others). Take static navbar example from: http://getbootstrap.com/examples/navbar-fixed-top/
The navbar code already contains a div with class container which wraps the navbar content and set the width for the different grids (so content is responsive) already.
The 100% width "effect" is set by a background color (and border) of the .navbar-default class (set 100% width by the .navbar-fixed-top left: and right both 0).
Remove this background and border:
.navbar-default {
background-color:transparent;
border: none;
}
After this the navbar it self do not have a background color. To solve wrap your nav bar inside a extra div (inside the .containter div) and apply a background color on it:
.navbar > .container > div
{
background-color: pink;
}
When you apply this background on the .container without the extra div your background will 15px wider then your content on both sides due to the gutter of the grids (padding).
Example: http://bootply.com/79742
html:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div>
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Im using the last version of Bootsrap and i had to override the "navbar-default" class like this :
.navbar-default{
background-image: none;
-webkit-box-shadow: none;
border-style : none;
background-color: white; // the color i chose
}
The result is my navbar has no more border/background style, and i can finally apply mine in my div ! (phewww)
I was struggling with the same issue. I solved it by adding some jquery that makes the ".navbar" the same width as the ".container".
$(document).ready(function () {
var siteWidth = $('.container').width();
$('.navbar').width(siteWidth);
});