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.
Related
I am using the Neve theme to build a custom WP theme. It is a one-pager.
So all nav links in the menu are custom links, linking to a section within the home page.
I first tried to make them relative links e.g. #service but then the mobile menu would not close after clicking them. After reading a bit online I found the solution to make them aboslute links e.g.
mydomain.com/#service
Now my mobile menu does close but all nav items are marked as active having this class
'current-menu-item current_page_item menu-item-home'
How do I find a workaround or what is in general the best way to handle this to only have the Home link active and not the rest?
Thanks in advance.
-Gerd
First of all thanks to Nico for pointing me in the right direction.
I wanted to post this here in a little more detail for everyone, who might have a similar issue.
I cleared all the formatting from the WP class that was assigned to all navigation link.
I created my own active class, called 'my-active'
I wrote the following jQuery code to add it when a nav item is clicked and take it away from the previos nav item (this might not be ideal code, since I am not a professional coder, but it works):
(function ($) {
$(document).ready(function () {
$('nav ul li:nth-child(1) a').addClass('my-active');
$('nav ul li a').on('click', function(){
$('nav ul li a').removeClass('my-active');
$(this).addClass('my-active');
});
});
})(jQuery);
I have been working on this for quite a while, and cannot seem to find why my dropdown menu is not working. After searching many online forums and asking friends, I have no answer. I just want the dropdown to work. I cannot seem to make the .dropdown_trigger class make the .dropdown class hide, or reappear. Any help would be very much appreciated. Linked below are the pages.
Thanks,
Alex
Index Page CSS File
By inspecting the html page provided in the "Index Page" link, there is only one element with the "dropdown" class, and it's empty. It's not clear what your code is trying to show or hide.
<div class="dropdown"></div>
The "dropdown_trigger" class is located in a table header element:
<th>
PROJECTS
</th>
By inspection, there does not appear to be any javascript to trigger any behavior. It does not show up in Source in the Chrome Inspector. Normally, this would be done with JS to use .show() or .hide(), for example if you had jQuery (there are other ways). Or are you trying to create this without JS at all? Are you trying to create dropdown menus with only CSS?
If so, please check this tutorial out:
https://css-tricks.com/solved-with-css-dropdown-menus/
The key part is here:
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
By creating a CSS rule to change the visibility, the dropdown menu can be shown. However, there does not appear to be any HTML content to show in the current linked page you provided. That div is empty.
(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.
I want to change the subnavs on this code but everytime I try it takes the parent element (the background image from above.
I would have thought adding the following code would get rid of the background image for the subnavs but it doesn't.
ul.subnav li {
background-color:000;
}
What I want is to do some basic css for the subnavs with the names of each link. Nothing fancy.
Heres a link to the fiddle
http://jsfiddle.net/mitchelll182/t7QQ8/1/
Ok, so I see you're doing a CSS only menu, but that involves putting classes on everything and it ends up being a huge code mess. I think a better way would be to use jQuery. Something like this: http://jsfiddle.net/ewB9b/
See how the HTML code is nice and clean? Just nested UL's with one class. Now in the CSS, you can easily style the main links differently from the drop-downs. Read the comments in the CSS to see what's what.
.
Try:
ul.subnav li {
background-image: none;
background-color:000;
}
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.