Fixed navbar with bootstrap - html

I'm trying to change the navbar in my child theme but I'm a newbie. I read some questions here about that and even saw the bootstrap site, but I don't understand how to solve my problem. I'm sorry for my ignorance but could someone explain to me how it works?
I'm using this theme http://demos.codexcoder.com/#limo_wp and I would like to fixed the navbar instead of this "blink" and float. Just stay fixed after scroll the page.

You can find an example on the bootstrap website.
http://getbootstrap.com/examples/navbar-fixed-top/
Or you can change
<section id="headnev" class="navbar topnavbar">
to
<section id="headnev" class="navbar navbar-fixed-top">
in your header file and remove:
// Script for top Navigation Menu
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > 100) {
jQuery('#headnev').addClass('navbar-fixed-top').removeClass('topnavbar');
jQuery('body').addClass('bodytopmargin').removeClass('bodynomargin');
} else {
jQuery('#headnev').removeClass('navbar-fixed-top').addClass('topnavbar');
jQuery('body').removeClass('bodytopmargin').addClass('bodynomargin');
}
});
from custom.js

The following command:
Fixed to top:
Add .navbar-fixed-top and include a .container or .container-fluid to center and pad navbar content.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
If you want to fixed menu after scroll the page. You use fllowing javascript code. In this code fixed menu after if scrolls over a specific element. I wrote the following code based on your template.
<script>
if ( $('body').scrollTop() > $('.section-a').position.top ) {
$('#headnev').removeClass('topnavbar');
$('#headnev').addClass('navbar-fixed-top');
}
</script>

just add a class="nav navbar navbar-fixed-top"
I'll give you an example of my code, just use it and see how it works.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container" id="container">
<div class="navbar-header">
<div class="navbar-brand">Project Nature</div>
<button class="navbar-toggle" data-toggle="collapse" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active dropdown">
Nature <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Plants</a></li>
<li><a href="#">Landscapes</a></li>
<li><a href="#">Animals</a></li>
<li><a href="#">Elements</a></li>
</ul>
</li>
<li>Gallery</li>
<li>Blah</li>
<li>Contact</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
This will generate a navbar with a heading (title)
5 menu items of wich 2 are dropdowns.
Greetings :)

You would need to add something like the following CSS to a child theme to override this behavior in the parent theme.
#header .navbar {
animation:none !important;
}
If you aren't familiar with WordPress child themes, here is a good resource for you. There may even be a theme setting for this. Depends on what the theme developer made available in the theme's options.

In the navbar div, you should add the class name .navbar-fixed-top.

You could try my css also, simple yet effective if you are positioning it always on the top
.navbar{
position:fixed;
width:100%;
z-index: 1000000;
top:0;
}

Related

Bootstrap Fixed Navbar Behavior

Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.

How to make Bootstrap header item and dropdown-menu the same width?

I have this header in my Bootstrap template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
DDButtonText <strong class="caret"></strong>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.
How do I make my menu be the same size as the button regardless of browser, always?
You can try adding this:
CSS:
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply: http://www.bootply.com/MfkTjxasD7

Div data is not getting showed

I'm new to Web Development, and i've written the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="https://in.linkedin.com/in/debdebashis" target="_blank">Debashis Deb</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li>About Me
</li>
<li>Skills
</li>
<li>Interests
</li>
<li>Contact Me
</li>
<li>
<a> </a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid first">
<p>Welcome to my Page, Here you can find most of the informations related to me</p>
</div>
The problem that I'm facing is that, my last div is not getting displayed in the page. What mistake am I doing ?
On a fixed navbar you have to add a padding to the <body> of your site:
From the Bootstrap Documentation:
The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Make sure to include this after the core Bootstrap CSS.
http://getbootstrap.com/components/#callout-navbar-fixed-top-padding
body {
padding-top: 70px;
}
See the following snippet (little changes to support the responsive navbar too): https://jsfiddle.net/17mmmxps/1/

Bootstrap scrollspy not doing anything

I have looked at other similar questions and can't seem to find a solution.
I have the .nav class on my menu, the data-target is, I believe, pointing at the right element.
<body data-spy="scroll" data-target="#main-nav" data-offset="300">
<script type="text/javascript">
$(document).ready(function() {
$("#main-container").css("display", "none");
$("#main-container").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#main-container").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
<div id="main-header">
<h1>Springfield, NY</h1>
</div><!--Navbar-->
<nav id="main-nav" class="navbar navbar-inverse container nav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" class="navbar-toggle collapsed"><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 id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">Classes<span class="caret"></span>
<ul class="dropdown-menu">
<li>Youth Class (5-10)</li>
<li>Older Kids Class (10+)</li>
<li>Teens/Adults Class </li>
<li>Aiki Jiu-Jitsu</li>
<li>Private Classes</li>
<li>Corporate Seminars</li>
<li>Self Defense</li>
</ul>
</li>
<li>Instructors</li>
<li>Sister Dojos</li>
<li>Testimonials</li>
<li>Gallerys</li>
<li>Calendar</li>
<li class="dropdown">Information<span class="caret"></span>
<ul class="dropdown-menu">
<li>Articles</li>
<li>Student Info</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse-->
</div>
<!-- END Navbar-->
</nav><!--End of Navbar-->
I would be most happy for any suggestions!
On the page classes.html which I assume is the page you want to change the active class in your navbar the links in your navbar should not have the page preceeding the hash location in your links. So on the page classes.html if you have the links in your navbar written like so the scrollspy plugin will not recognize them and therefore will not change the active class when scrolling to the # location. So just on the page classes.html remove the page name and just use the # location like so and on all other pages you can keep it the same as you have it with the page name before the # location so it will point to the proper page. Also I know you stated that you have the .nav class in your <nav> tag. This is not neccesary for the plugin to function and is normally used for the inner nav sections. So you may want to consider removing this from your <nav> tag and just use .navbar and .navbar-inverse along with your container class. It is probably not hurting anything there but it is normally used for the inner <ul class="nav navbar-nav"> and not the outer navbar itself.

Second navbar goes under the first navbar on top

Hi I am using twitter bootstrap, and I am having two nav bar but the second navbar is hidden underneath of the first one
<div class="navbar navbar-fixed-top">
<a class="brand" href="../"></a>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
and the second nav menu is
<div class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
here is the whole code http://jsfiddle.net/YZJ5M/
You wont be able to see my second nav as it is underneath of the first nav and I want the second nav bar to be just below it. Thank you
Simply take off the position: fixed rule for navbar-fixed-bottom and navbar-fixed-top. Or if you would not like to change it, add margin-top: 43px rule to your tabbable class.