(I use bootstrap 3.3.7 on this one)
Hi. I wanted to have the effect on my bootstrap navbar, that in wherever section the user is (I use tags on my One-Page site), the text in the navbar is highlighted automatically just by scrolling. I already set up the dropping anchor links...
So with this additional attributes to the body tag it's working great so far
<body data-spy="scroll" data-target=".navbar-collapse">
...but there is one Problem. I ONLY want the TEXT in the navbar to seem active, highlighted. But as you can see on the picture (upper example), there is this kinda box now around the highlighted navbar link. It came from nowhere. How can I get rid of it, so only the text color is a bit lighter when it's active?
Look on the image here. The upper example is the problem now, and the bottom one is how I would like it, but with using scrollspy. So not that black box.
Greets and thanks a lot in advance my friends
You need to change the active state of the <a> tag to have a background of none. Bootstrap adds the class of active to the li containing the link when you scroll with scrollspy. So it would be something like the following:
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
background:none;
}
In the example above I included the hover and focus states as well but if you want to change those you can do on your own also by the colors in your image I am assuming that you are using navbar-inverse if you are using something else like navbar-default you will have to change that accordingly.
Related
Sometimes (not always) when I click a menu element on my webpage's header an annoying selection box appears (see the picture). Can I hide it somehow? Why is it there at all?
https://i.imgur.com/HRrTpyV.png
Use outline:none to anchor tag class
you can try doing --
a:visited, a:hover, a:focus {outline: none}
Unfortunately it looks like you can't hide link text with CSS. On my WordPress site, at 375 px and below, the titles of the links in the secondary-navbar start to overlap.
Please see for yourself
What I'm trying to do is to say "as soon as the titles start to overlap (at 375px and below), make the titles disappear." I'd also like to make the glyphicons larger and centered.
Here's a link to my header.php file. I didn't write the code for this site and am not very familiar with the wp_nav_menu function, but I would guess that it's probably line 62 that's causing the menu titles to appear in the div with the nav navbar-nav secondary-links class.
So then, if that is the problem, how do we get that specific part of the function to disappear at 375px and below?
I tried commenting out line 62 and got a pretty bad result:
Please point me in the right direction if you have any suggestions / ideas. Maybe there's a way to disable the titles with JQuery? Thank you.
Here is the solution put it in the end of the stylesheet file.
#media only screen and (max-width:480px) {
.secondary-navbar .navbar-nav > li > a{font-size:0px;}
.secondary-navbar .navbar-nav > li > a:hover{font-size:0px;}
.secondary-navbar .navbar-nav > li > a span{font-size:20px!important;}
}
Hey I asked a detail question previously about this, but I think that was the wrong approach to solve the problem. So I am asking this as simply as possible.
I am using Twitter-Bootstrap and I have set my dropdown-toggle to dropdown on hover (normally it happens through clicking).
During hovering, the dropdown-toggle becomes a darker color to highlight it, however, as the user moves his/her cursor to the dropdown menu, the color of the dropdown-toggle changes back to its original.
How do I fix this? I tried using the active and focus classes but that did not seem to work. Any help is greatly appreciated. I can make a fiddle for you guys if that would help.
Edit: I have figured out the solution thanks to Turbopip. It is something like this:
.navbar-default .navbar-nav .dropdown:focus,
.navbar-default .navbar-nav .dropdown:hover,
.navbar-default .navbar-nav .dropdown:active {
background-color: black;
}
After seeing him use the anchor tag for solution two, and dropdowns for 3 and 4, I figured I had to change the color of the dropdown tag, not dropdown-toggle.
Solution 1? Try to set the class of the <li class="dropdown"> to open on hover
Solution 2? This might help, but will know more once you post the code.
.navbar-default .navbar-nav>.open>a {
background-color: black;
}
Solution 3? You could also try adding the class active to the opened LI, it should create the same effect, and you are already using javascript/jquery to simulate clicks in Bootstrap, I would guess.
Solution 4? In your script that creates the hover effect with Bootstrap CSS, listen to the li.dropdown instead of li.dropdown > a
I seem to be having an issue with my one page navigation website. When I push my keys down or even scroll down the links don't change. What am I doing wrong?There is a video that I posted about the issue I'm having.
https://www.youtube.com/watch?v=yK_tjT536bA
So you have two choices looking at your existing code. You can either get this functionality using bootstrap javascript, or jquery.nav, which is the one I think you're trying to use. I'll give example usage for both, regardless.
Bootstrap
$('body').scrollspy({ target: '#navbar-example' });
where #navbar-example is the ID or class of the parent element of any Bootstrap .nav component.
Jquery.nav
$('#nav').onePageNav({
changeHash: true,
scrollSpeed: 750,
});
If you look at your code, your equivalent of this first line is incorrect (you have $('#nav').onePageNav();).
You also need to target the navbar <li> tag when the class .current is applied:
.navbar-default .navbar-nav > li.current > a {
color:#333;
}
Demo fiddle. I made the navbar fixed using class navbar-fixed-top so it was more obvious.
I'm using Bootstrap 2.x. I've used a tabbed navigation and it's working well, provided the links used to move between the tabs are on the .nav-tabs themselves.
If I put a link the main body which refers to a link/target within the .nav-tabs list/menu, the content loads fine.
However, the .nav-tabs themselves don't change. That is to say a new tab and content shows, which is great, but since the .nav-tabs don't update two things occur:
The wrong tab is active.
The active .nav link doesn't work. So say I went from tab href="#nav-a" to tab href="#nav-b" but from a link in the main content and not in the .nav-tabs the link for #nav-a stays active (and not clickable), preventing me from returning to it.
Should I be using data-spy or something like that?