I am trying to apply css rules to my navbar menu, but I do not wish for them to show on the collapsed menu. Using the answer I found here I tried the following:
#media (min-width: 980px) {
/* your conditional CSS*/
}
However if my browser windows is at 900px, the collapsed menu isn't show and therefore my CSS isn't shown. Here is the code for my menu:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header_links">
<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 class="collapse navbar-collapse" id="header_links">
...
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
How can I reliably only apply CSS rules to my menu when it isn't collapsed?
Have you tried applying your conditional css under #media (min-width: 900px) {... ?
Here's a sample that changes the background color of the navbar once its at least 900px wide:
http://www.bootply.com/Xt0oIHkhjs
Related
This question already has answers here:
How to get dynamic data-offset values for Bootstrap 3 affix method
(7 answers)
How can I fix the bootstrap navbar to the top after a div was scrolled?
(4 answers)
Closed 6 years ago.
What I am trying to do is make the nav bar stay at the top of the page when you scroll past it. As I am quite new to JavaScript I looked a few tutorials, however, none of them really worked with the Bootstrap nav bar. I was just wondering if there was a way to do this so that it works with the Bootstrap columns.
Also how could I make it so that while it's scrolling, the background colour starts to fade in?
Here is the HTML code for the nav bar, in case that helps:
<div class="container">
<nav class="navbar navbar-default" id="mNavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
Bootstrap 3 has a class .navbar-fixed-top that can be applied to nav element to fixed to top of page. It works with all basic navbar functionality at different screen sizes. There is an example as part of the official documentation.
<nav class="navbar navbar-default navbar-fixed-top" id="mNavbar">
If you need it to become sticky at a certain amount of px from top of screen then you you'd need to attach a scroll event handler to the page. You would then check the distance the page has been scroll then apply the fixed nav class or set styling to fix to a specific position. Something like this:
$(document).ready(function() {
var $navbar = $("#mNavbar");
AdjustHeader(); // Incase the user loads the page from halfway down (or something);
$(window).scroll(function() {
AdjustHeader();
});
function AdjustHeader(){
if ($(window).scrollTop() > 60) {
if (!$navbar.hasClass("navbar-fixed-top")) {
$navbar.addClass("navbar-fixed-top");
}
} else {
$navbar.removeClass("navbar-fixed-top");
}
}
});
body{
position: relative;
display: block;
height: 1000px;
overflow-y: scroll;
}
.navbar{
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default" id="mNavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="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>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
</div>
I'm not sure what you mean by padding is being added to top and bottom, but you can just override the CSS by adding .navbar-fixed-top to your stylesheet after the Bootstrap version and updating the padding values. There could be a top CSS value that is moving the navbar away from top of screen, you can resolve that by setting top to 0.
to make it scroll down add navbar-fixed-top to your nav tag the catch here is that it will be stuck to the top of the page like so
<nav class="navbar navbar-default navbar-fixed-top" id="mNavbar">
https://jsfiddle.net/nyd7sd1q/
I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<button type="button" class="navbar-toggle collapsed" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
I know this is fairly simple but I got stuck trying to hide the Bootstrap main navbar on screens greater than 768px.
I don't want to hide the <nav> tag. I just want to hide the <div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">...</div>
jsFiddle
<nav class="navbar-blue" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header navbar-default">
<button type="button" class="navbar-toggle navbar-menu" data-toggle="collapse" data-target="#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>
</div>
<!-- User menu to show on screens < 768px -->
<div class="collapse navbar-collapse navbar-default custom-menu" id="navbar-collapse-1">
<ul class="nav navbar-nav client-nav navbar-right">
<li>My Profile</li>
<li>Account Settings</li>
<li>Sign Out</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Two things affecting your ability to control this style
The style that sets the display:block for the navbar uses !important. You need to override that with your own !important rule
The style you are using has lower specificity than the one that is making it display:block. The style in effect is .navbar-collapse.collapse (two classes specified), whereas yours is simply .custom-menu (only one class).
To remedy both of these you need a rule similar to this:
#media only screen and (min-width : 768px) {
.navbar-collapse.custom-menu {
display: none!important;
}
}
That will cause the menu to be hidden at those sizes.
Demo: http://jsfiddle.net/4jgL2hfy/
In a nav bar like this:
http://getbootstrap.com/examples/navbar/
When the window gets small enough the menu items disappear and the 3 lined button appears. I was wondering what changes are occurring when this occurs. I especially want to know what classes are added to what. My code is the following and acts like the link above. I have used inspect element but I don't see any changes occurring. Thanks!
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button id="menuButton" 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>
<h4>Title</h4>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">A</li>
<li class=""><a href="#" >B</a></li>
<li class=""><a href="#" >C</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
There's no class-toggling behind this particular change; while you're inspecting the element, watch the CSS that's being applied. The different forms of the navbar display are based on media queries. For example:
#media (min-width: 768px) {
.navbar-toggle {
display:none
}
}
is the css that makes the menu icon button disappear at larger screen sizes.
I have a CSS issue that I cannot even begin to get my head around. I have a navbar with the standard collapsed button, that when clicked shows rows of links. I have a CSS media query that stretches the rows and centers the links as so:
http://imageshack.us/a/img89/4940/t678.png
Here is the CSS that does the stretching and centering:
/* when the navbar becomes a button, center and stretch the dropdown links */
#media (max-width: 992px) {
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
width: 100%;
text-align: center;
margin: 0 auto;
}
}
Unfortunately, when you first press the collapsible button to unfold the rows, the text does not appear centered. It takes a full 1000ms (1s) for the text to center align. You can literally watch it go from the far left side of the screen to the center.
This leads me to believe I am doing something wrong with my CSS.
How can I fix this issue?
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- navbar header -->
<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>
<a class="navbar-brand" href="#">
<img class="img-responsive" src="assets/img/logo.png" >
</a>
</div>
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
I found a solution.
To center the text immediately without delay, change the CSS selector from
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in
to
div.navbar-collapse.navbar-ex1-collapse