I'm using this template:
http://bootstrap4.guide/
And I want to modify menu a bit, instead of having blue Bootstrap 4 text, I'd like to have a image there. It's looking all fine until I look at mobile view.
I'm expecting to have my image in the same place as the text:
However my image happens to appear under hamburger menu:
This is what I have at the moment:
<nav id='topNav' className='navbar navbar-default navbar-fixed-top'>
<div className='container'>
<button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
<div className='collapse navbar-toggleable-sm' id='collapsingNavbar'>
<ul className='nav navbar-nav'>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#one'>Cards</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#two'>Flexbox</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#three'>5 Tiers</a>
</li>
<li className='nav-item'>
<a className='nav-link page-scroll' href='#four'>More</a>
</li>
</ul>
<ul className='nav navbar-nav pull-xs-right'>
<li className='nav-item'>
<a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'>About</a>
</li>
</ul>
</div>
</div>
</nav>
I've just replaced Bootstrap 4 with this img tag: <img src='logo.png'/>. I'm quite new to bootstrap, if someone would help me to figure out how to sort this out, that'd be great.
I would suggest to divide the the hamburger and the logo in two equal parts by using bootstrap classes for small devices.(col-xs-6)
<div class="col-xs-12">
<div class="col-xs-6">
<button className='navbar-toggler hidden-md-up' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
☰
</button>
</div>
<div class="col-xs-6">
<a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
</div>
</div>
Adjust the navbar-brand class as needed for your logo image..
/* responsive nav */
#media(max-width:48em) {
.navbar-default .navbar-nav>.nav-item {
float: none;
margin-left: .1rem;
}
.navbar-default .navbar-nav {
float:none !important;
}
.navbar-default .navbar-brand {
float:none;
}
.navbar-default .navbar-brand img {
display:inline;
}
}
http://codeply.com/go/7HJgyK6nxQ
Is there a Bootstrap3 component that simply collapses a menu at a breakpoint without adding a toggle. For example, if I have a horizontal menu that looks like this on desktop
at screen widths below 768px I would like it to simply stack without collapsing into a toggle like this
Any thoughts?
Remove the collapse button and the navbar-collapse class. From the getbootstrap.com examples, something like this should do the trick:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
You will have to add a media query to make sure that padding is added to the content in mobile display.
I have made a Bootply here where I added the following CSS to make it work:
#media screen and (max-width: 768px) {
#wrap > .container {
padding-top:200px;
}
}
I am trying to make a navbar which hides text on smaller screens. I cannot get the bar to align correctly!
http://jsfiddle.net/blisstdev/ZrA3u/10/
http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/
As you can see, the left side is lower than the right!
Also, the first list element of the 'ul' on the left does not fill the size of the 'ul' container, yet all the other list elements do. Why is this?
Thank you very much!
<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
<div class="container-fluid header-top">
<ul class="navbar-nav navbar-left pull-left list-inline contact-links">
<li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>
<li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
<li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan#garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
</ul>
<ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
<li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
<li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
</ul>
</div>
</div>
On small screens, the anchors are set to display: block, while this is not the case for the anchors in the right hand list. Just make sure to apply the same styles to each list and they will behave in the same way.
I updated you FIDDLE you need to set the same padding to the first <li> item in the left nav-bar like this
#media (min-width: 768px) {
.contact-links.navbar-nav > li.header-link-container:nth-child(1) {
padding-bottom: 15px;
padding-top: 15px;
}
}
should do it.
I'm having trouble centering my content in the bootstrap navbar. I'm using bootstrap 3. I've read many posts, but the CSS or methods used will not work with my code! I'm really frustrated, so this is like my last option. Any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</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>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<h1>Home</h1>
</div>
<!--JAVASCRIPT-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
https://jsfiddle.net/amk07fb3/
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
http://jsfiddle.net/bdd9U/2/
Edit: if you only want this effect to happen when the nav isn't collapsed surround it in the appropriate media query.
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
http://jsfiddle.net/bdd9U/3/
The original post was asking how to center the collapsed navbar. To center elements on the normal navbar, try this:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
There's another way to do this for layouts that doesn't have to put the navbar inside the container, and which doesn't require any CSS or Bootstrap overrides.
Simply place a div with the Bootstrap container class around the navbar. This will center the links inside the navbar:
<nav class="navbar navbar-default">
<!-- here's where you put the container tag -->
<div class="container">
<div class="navbar-header">
<!-- header and collapsed icon here -->
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- links here -->
</ul>
</div>
</div> <!-- close the container tag -->
</nav> <!-- close the nav tag -->
If you want the then align body content to the center navbar, you also put that body content in the Bootstrap container tag.
<div class="container">
<! -- body content here -->
</div>
Not everyone can use this type of layout (some people need to nest the navbar itself inside the container). Nonetheless, if you can do it, it's an easy way to get your navbar links and body centered.
You can see the results in this fullpage JSFiddle:
http://jsfiddle.net/bdd9U/231/embedded/result/
Source:
http://jsfiddle.net/bdd9U/229/
For Bootstrap 4:
Just use
<ul class="navbar-nav mx-auto">
mx-auto will do the job
Bootstrap 5 (Update 2021)
The Navbar is still flexbox based in Bootstrap 5 and centering content works the same as it did with Bootstrap 4. Examples
Bootstrap 4
Centering Navbar content is easier is Bootstrap 4, and you can see many centering scenarios explained here: https://stackoverflow.com/a/20362024/171456
Bootstrap 3
Another scenario that doesn't seem to have been answered yet is centering both the brand and navbar links. Here's a solution..
.navbar .navbar-header,
.navbar-collapse {
float:none;
display:inline-block;
vertical-align: top;
}
#media (max-width: 768px) {
.navbar-collapse {
display: block;
}
}
http://codeply.com/go/1lrdvNH9GI
Also see:
Bootstrap NavBar with left, center or right aligned items
This code worked for me
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
from the bootstrap official site (and, almost, like Eric S. Bullington said.
https://getbootstrap.com/components/#navbar-default
the example navbar looks like:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
...etc
to center the nav, that what i've done:
<div class="container-fluid" id="nav_center">
css:
#media (min-width:768px) { /* don't break navbar on small screen */
#nav_center {
width: 700px /* need to found your width according to your entry*/
}
}
work with class="container" and navbar-right or left, and of course you can replace id by class. :D
Seems like all these answers involve custom css on top of bootstrap. The answer I am providing utilizes only bootstrap so I hope it comes to use for those that want to limit customizations.
This was tested with Bootstrap V3.3.7
<footer class="navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-xs-offset-5 col-xs-2 text-center">
<p>I am centered text<p>
</div>
<div class="col-xs-5"></div>
</div>
</div>
</footer>
this should work
.navbar-nav {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Use following html
<link rel="stylesheet" href="app/components/directives/navBar/navBar.scss"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li><h5>Home</h5></li>
<li>|</li>
<li><h5>About</h5></li>
<li>|</li>
<li><h5>Contacts</h5></li>
<li>|</li>
<li><h5>Cart</h5></li>
</ul>
</div><!-- /.container-fluid -->
</nav>
And css
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-default {
background-color: white;
border-color: white;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
background-color:white;
}
Modify according to your needs
V4 of BootStrap is adding Center (justify-content-center) and Right Alignment (justify-content-end) as per: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
it because it apply flex. you can use this code
#media (min-width: 992px){
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
justify-content: center;
}
in my case it workded correctly.
I integrated twitter bootstrap navbar into my asp.net project. However, I'm trying to align my bootstrap text into the center. Here is my source code for my navbar
<div id="twitterbootstrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">iPolice</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li>Home</li>
<li class="divider-vertical"></li>
<li>Login</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the image of my bootstrap
Then i added this twitterbootstrap css inside to attempt and shift the ipolice, home, contact and login into the center
#twitterbootstrap {
position:absolute;
text-align:center;
}
which didnt work. I visited this link and tried but still wasn't able to do it. May i ask how do i align my text into the center?
Depending on where you want the Brand link to appear, here are two possiblities
http://jsfiddle.net/panchroma/cW9sA/
or
http://jsfiddle.net/panchroma/GWMnF/
EDIT: A third variation where the iPolice brand link is always centered, even at narrow viewports
http://jsfiddle.net/panchroma/F5x5Z/
Note that in the second example I've added a copy of the brand link into the main menu, and used the utility classes of .hidden-desktop and .visible-desktop to fine tune how this is displayed at different viewports
Important CSS is
#twitterbootstrap .navbar .nav,
#twitterbootstrap .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
#twitterbootstrap .navbar-inner {
text-align:center;
}
Some of this CSS is based on an answer from Andres Ilich
Good luck!