-
Posts
-
Hello
I’ve created a single page homepage for my website and added anchors from the top navigation to areas of the page. My issue is that the main navigation has a constant underline effect, because all the anchor points are on that page. Is there a way to remove the underline effect but keep the mouse hover over effect instead?
I tried this code:
.avia-menu-fx {
display: none;
}
But that just completely removed everything, which i’m really hoping to avoid. Also this way people can get some interaction from the site when choosing a section to look at.
Thanks
Hi,
Can you give us a link to the website? I’m not sure what you mean by “all anchor points are on the page”.
Regards,
Ismael
Hello
I’m afraid i cant give you a link to the website as its on a private staging server and i cant send a private post.
I’ll try and explain it instead.
Ok so I have a single page scrolling website. I added anchor points on the page so that users would be able to use the top navigation to scroll quickly through sections on the single page site. I assigned the top navigation to link to the anchor points by typing in:
http://SAMPLE-WEBSITE.com/#case-study. The links work perfectly however because the links are all on that homepage the navigation has a constant underline (to show users they are on a certain page, like your demo site when click on home).
Is there anyway to change the css or code that i can add that will remove the active link effect from the top navigation? But keep the hover over effect when they mouse over to choose which section of the homepage to view?
I appreciate its probably hard to visualise because i cant send you the link, but if you could help i’d greatly appreciate it. I would prefer not to have to completely remove the hover over effect if possible (would make the navigation very boring).
Thanks
Hi virtuosodurham,
Change all of your links to *just* anchors. So each url will just be #about or whatever your anchors are.
Regards,
Devin
Hello,
I cant do that because i have pages that come off the homepage that show design galleries. If i only add the anchor points then users cant navigate when on another page.
Is there no way to remove the active navigation page effect and just keep the hover effect?
Thanks
You would need to target the menu item by its ID and then change its hover and active state based on the body class.
If a link is recognized as being the current page then its going to be highlighted as such for proper usability.
Ok, please could you give me an example of how this would look in the custom css.
I just want to turn off the active link effect on the navigation, im surprised its so difficult. But never mind, any helpful hints would be greatly appreciated.
Thanks
If you have a menu that is detecting if a page is currently viewing the url then its to be expect that would be highlighted. So since you have multiple links to the same url it will always show as active.
The actual css is very simple:
#menu-item-4546 .avia-menu-fx {
display: none;
}
#menu-item-4546 > a {
color: #333;
}The menu item ID will be specific to your site.
Hi,
No, you need to inspect each menu element using Firebug or Google Chrome’s Inspect element. Using Chrome, right click on the menu items then click “Inspect Element”. The menu item ID will look like this:
Yours will be different.
Regards,
Ismael
great many thanks that worked.
Is there the ability to restore the hover highlight on the text or underlining on mouseover so the menu looks like it used to with the shorter url anchor link?
Basically same issue as above – I have a one page site where the main top menu are anchor links but I have an added link on that menu which goes to a separate contact page. When you got to the contact page you can’t get back to the main page through the menu links unless you use the longer url but then you have the styling issues. Hope that makes sense.
Hi!
No, this is not possible at the moment. We’ll look into it though and maybe we can use the waypoints script to implement this feature.
Best regards,
Peter
Hallo Peter and Kriesi Team,
I have also the same Issue like above.
One main page with anchors and many subpages.
I have also considered a waypoint script, because this would also highlight the menu points when you scroll through the site manually.
It would be a great feature and I think I am not the only one who would be grateful if you implement this!?
Example Script: http://imakewebthings.com/jquery-waypoints/
But I have another Idea.
Can I have all the normal links in the main menu.
And on the onepage homepage the anchor links in the second menu?
But the second is just shown on the main site, not on the sub sites.
I hope you can follow me.
Kind Regards and thanks a lot in Advance for the great support here!
Jean-Marie
Hi Jean-Marie,
You would need to have a secondary menu created and then use a conditional statement in the header to show that menu and hide the other if you are on the homepage alone.
I’m not entirely sure it will work without trying it but either way it would need to be done by a freelance developer as its quite a bit beyond what we can assist with via support.
Regards,
Devin
- The topic ‘Single page navigation underline effect issue’ is closed to new replies.