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;
}
}
Related
I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?
You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]
It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right ">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing
I want to make the Menu Bar stick to the top when the user scrolls. I used to use Bootstrap's class called 'navbar-fixed-top' and it works fine.
But the user wants to add some brands and logos above the Nav bar. But they don't want those logos to stick to the top when the user scrolls. They want to stick only the Nav bar below those logos.
I tried to use 'navbar-fixed-top' but it appears on the Logos instead of below the Logos.
My HTML:
<div class="container">
<nav class="col-md-12 text-left">
// Code for Logos and Images
</nav>
</div>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>.....</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
How can I make the nav-bar stick to the top (not the logos)?
First remove navbar-fixed-top from NAV tag and put this code in head tag
<script>
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height <= 100) {
$("nav").addClass("navbar-fixed-top");
}
if(height <= 10) {
$("nav").removeClass("navbar-fixed-top");
}
});
</script>
I am building a portfolio project using Bootstrap. I wanted to have the navbar be responsive but not use the default hamburger menu. Instead, I have a media query that changes the text links into icons. However, when the screen is resized to 767 and below, the icons collapse into a second row. I want them to just get closer to the navbar header.
I've been searching all day but everyone else seems to be asking about adding the hamburger menu.
Any suggestions?
http://codepen.io/anthkris/pen/xwpPrE/
<!-- Fixed navbar -->
<nav id="mobile-nav" class="navbar navbar-default navbar-fixed-top">
<div class="container nav-mobile">
<div class="navbar-header">
<a class="navbar-brand" href="#">K. Anthony</a>
</div>
<div>
<ul class="nav navbar-nav navbar-left">
<li>
<i class="fa fa-home"></i>
</li>
<li>
<i class="fa fa-file-photo-o"></i>
</li>
<li>
<i class="fa fa-book"></i>
</li>
<li>
<i class="fa fa-envelope"></i>
</li>
</ul>
</div><!-- #mobile-nav -->
</div>
</nav>
If you want the navigation to stay the same and just change icons you can try:
#media only screen and (max-width : 768px) {
.navbar-header {
float: left;
}
.navbar-nav {
float: right;
}
}
This will pull the header, which is your name to the left and the icons to the right. Keeping it the same as if you have it with the words.
#media only screen and (max-width : 768px) {
.navbar-header {
display: inline-block;
float: left;
}
}
Try this in media query this might help you.
I'm using the latest twitter Bootstrap (non-modified). The below HTML produces different result in IE and Firefox:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
In IE the icon (or font, the icons are fonts now days) is rendered properly after the text "test" on the same line. In Firefox the icon is rendered below the text. I would like both to render the icon on the same line. Anyone knows what is going on?
The short answer is: IE is doing it wrong.
In your <li>, you have 2 block elements, a <p> and an <a>. Block elements form blocks, therefore if you want them inline, either change them to inline-block, or if the menu items are unrelated, i.e. Test goes somewhere different than the refresh icon, put them each in their own <li>, like so:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Test</p></li>
<li><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>
</ul>
</div>
</div>
Note from comment: <a> tags are normally inline, but twitter bootstrap css specifically sets the <a> tag in the <nav> under <li> to block. .nav>li>a {display: block;}
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.