i'm working on this website builted using Bootstrap.
As you can see i've a Fixed Top Nav Bar and the Homepage is a "One Scroll" page. What i need is to highlight this 2 anchorpoints when they are active:
<li><a class="page-scroll" href="#ark">Architektur</a></li>
<li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
With this CSS Style:
background-color: #ffffff;
color: #009ee0 !important;
I tried with this with no results.
Any tips?
EDIT:
I just added this:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
And works, ut as soon i click on
<li><a class="page-scroll" href="#ark">Architektur</a></li>
<li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
the alink has a Grey Background. But as soon i click somewehere then looks perfect. Is a JS problem?
just add this in your css
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background: yellow !important;}
and you are done,
Ok so there are a few things to address here with your code. First you need to add the body scrollspy tag. So it will look like this:
<body data-spy="scroll" data-target="#navbar" data-offset="50">
Then you have the id #navbar stated twice. If you resize your window to a mobile size you will see that your collapsable menu doesn't collapse. This is because you have your data-target set to #navbar and you have this stated twice. It doesn't have anything to do with scrollspy but I figured I would give you a heads up anyway to save you a future headache and we will set your button to target the .navbar-collapse. Then remove the class of page scroll from everything except the href's that have an anchor tag in it. Long story short your navbar should look like the following:
<nav id="navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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 class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="selected" href="http://develop.nowcommu.myhostpoint.ch/">Home</a></li>
<li><a class="page-scroll" href="#ark">Architektur</a></li>
<li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
<li>Wohnungen</li>
<li>Lage</li>
<li>Galerie</li>
<li>Kontakt</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Then I always like to give the following jquery code because it gives you more control over the scrollspy plugin like how fast the animation is and better control over the top offset so add this as well:
$(".navbar a.page-scroll").on('click', function(event){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top - 50
}, 800, function(){
window.location.hash = hash;
});
});
So now your body is targeting the #navbar and your collapsable menu will work and your markup will be correct.
Here is a fiddle to show you this working Fiddle
Related
Currently i am having this problem where i increased the padding on the bootstrap nav bar to make it bigger. I made the text bigger. My concern is that when i use the hover effect, it only covers the text and not the bigger area. Is there a way to sort of add padding on the hover effect? What is the best way i should approach this?
This is my html
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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>
<a class="navbar-brand" href="./">konek</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li class="active">Timeline</li>
<li class="">My Profile</li>
<li class="">Update Account</li>
<li class="">Logout</li>
{% else %}
<li class="">Sign Up</li>
<li class="">Log In</li>
{% endif %}
</ul>
</div>
</div>
</nav>
You should add the :hover styles to the parent of the text, which should fill the Navbar.
The parent in this case should be the li tag. In Bootstrap, iirc, it should fill the Navbar by default.
Is the :hover css style applied to just tag element or the li. If the :hover styling is on the tag then change it be on the li like li:hover, if the hover effect is on the li then make sure the navbar is 100% of the parent and that the ul is also 100%. That way the hover will take the full height of the navbar rather than just the text.
ul {
height: 100%;
}
li {
height: 100%;
}
li:hover {
...hover-code
}
I have a navbar in which some of the navbar links always show, even in collapse mode. I am using Bootswatch's Paper theme: Bootswatch Paper Theme.
Desktop:
Mobile/Collapsed:
The content that continues to show is done by adding 'navbar'header' to a div and pulling it right, so the default styling is not applied to the links inside that.
I have applied some styles, but there are still a few issues.
I am not able to add anchor () tag to the links that always show (i.e. 'Show Link 1')
If I click on the Username dropdown and click and hold one of the menu links (i.e. Profile), then the color changes:
However, it should look similar to the default dropdown (on the left):
<div class="navbar-header navbar-right pull-right">
<ul class="nav pull-left">
<li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 1</li>
<li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 2</li>
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" id="user-dropdown" class="dropdown-toggle">
User Name <span class="glyphicon glyphicon-user"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="navbar-link">
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-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>
Here is a JSFiddle: JSFiddle
Is there a way to add to/modify the variable file so the default styling can be applied regardless of which Bootswatch theme is used, and/or even default Bootstrap theme?
If I am understanding your issues correctly:
I am not able to add anchor () tag to the links that always show
(i.e. 'Show Link 1')
Try to add the anchor tag before the <li>
<a href="#"><li class="navbar-text navbar-link pull-left
navbar-always-show">Show Link 1</li></a>
If I click on the Username dropdown and click and hold one of the
menu links (i.e. Profile), then the color changes:
There are two things that you can do:
You can either add an extra class to ul in the html and then add style to override the default css, or just override the default style for nav.
HTML
<ul class="nav pull-left nav-override">
CSS
.nav-override .open > a, .nav-override .open > a:hover, .nav-override .open > a:focus {
color: #ffffff!important;
background-color: #0c7cd5!important;
}
or
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
color: #ffffff!important;
background-color: #0c7cd5!important;
}
fiddle
I have two questions. The first and the most important is how to make the menu in the minified version to appear. And the second thing I want is for the navbar to stay on the top when I scroll down and to turn black from transparent that it is now.
The Code is:
<nav class="navbar-inner navbar-inverse">
<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">
<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="#">Cosmos</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
and the css is:
.navbar-inner {
background: transparent;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
You can also check the codepen page of the project:
https://codepen.io/georgekech/pen/ZLNMGE
Answer to both your questions:
While using bootstrap responsiveness is already handled. If provided the right markup on your HTML, bootstrap will take care of the menu on mobile view. Hence when you resize down to the mobile view, there would be a "hamburger menu" on the right of your navbar which toggles your menu options.
Next, If you want your header to stay on the top when you scroll down. Bootstrap already provides it. You just have to replace the class navbar-inverse with navbar-fixed-top on your <nav>. Also importantly remove the unnecessary position: absolute properties given to the navbar-inner
.navbar-inner {
background: transparent;
position: absolute; //remove
top: 0; //remove
right: 0; //remove
left: 0; //remove
z-index: 1;
}
Next, to change the background of the navbar when you scroll you need to add 2 simple changes, one to your JavaScript(using JQuery) another to your CSS, these 2 changes going hand in hand.
JQuery:
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
CSS:
.navbar-fixed-top.scrolled {
background: black;
}
The Jquery will basically add/remove(toggle) a class to your navbar when you scroll more than the height of the navbar. Ofcourse the CSS is to just add the background color when the class is added from the JQuery.
Your codepen here
Note:
Obviously don't forget to include the JQuery library for the JavaScript to work, alternatively you can do the same using plain JavaScript.
If you do include JQuery, since you're using Bootstrap v3.3.6, JQuery version needs to be higher than 1.9.1 but also lower than 3. All of which you can find here
Done deal !
Try Following Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<!-- Bootstrap Navigation Start -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<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">
<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="#">Cosmos</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div>
<ul id="menu-hover" class="nav navbar-nav">
<li>Home</li>
<li>Public Service</li>
<li>Idea SubMission</li>
<li>Power Division</li>
</ul>
</div>
</div>
</div> <!-- End Navbar Collapse -->
</nav>
<!--End Bootstrap Navigation
.navbar-inner {
background: transparent;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
.navbar-inner position fixed will make your menu stable even if you will scroll down.
To change menu color on scroll, please check this answer of this menu background change color on scroll.
You need to use the same name used as the data-target in the button as the id of the div for the menu. In this case, it is "bs-example-navbar-collapse-1"
So add id="bs-example-navbar-collapse-1 to the div class="collapse navbar-collapse"
For the navbar, you don't need to use CSS if you are using bootstrap for what you want. Add the class of "navbar-fixed-top" to the nav element.
When you do use this class, you will need to add body {padding-bottom: 70px; }. This will push the content of your page to be under your navbar. 70px works with your example but change it as you see fit.
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;
}
I'm having some strange issues with a bootstrap navbar. When the window is small enough, the expand button shows up as expected. However, once the button is clicked it behaves really strangely. The first click flickers the contents of the drop down, then dissapears. On the second click, the dropdown shows up normally but with no animation.
The code (as rendered by the server)
<div class="navbar 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>
<div class="nav-collapse">
<ul class="nav">
<li>Businesses</li>
<li>About Us</li>
<li>Contact</li>
<li>Advertise</li>
</ul>
<ul class="nav pull-right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</div>
</div>
Any thoughts?
EDIT: There will normally be an image in the brand anchor
I had this same issue and found that I had this small script block in my page which I must have copied from somewhere.
<script type="text/javascript">
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
</script>
Removing this fixed the issue.
I'm not sure where it came from, I assume some example from Bootstrap 2.x or something.