- This topic has 5 replies, 2 voices, and was last updated 5 years, 9 months ago by
.
-
Posts
-
I’d like the actual page to show as ‘active’ (mouse down) when folks are on a page. I am not using breadcrumbs so there is no way of knowing from the navbar what page one is one. I’ve tried adding a:active to various bits of navigation CSS, but not found the right part yet. Can you advise? Thanks.
If you can post a link as an example then I can figure out the exact code needed to do it. I won’t need a login or anything, just a link to one of the pages.
Hi Wes,
The site is behind a coming soon page til launched this weekend. But I’ve been trying to tweak CSS like this to ensure mouse-down (active page) is highighted as the theme doesn’t do this. I add the a:active but it won’t change the active page color. It’s on around line 1379 or so. I’ve edited the CSS so it might not be exactly that. Any ideas which line(s) to target to achieve this, and do I have the correct code. I need a page menu item to change to that color to show the page is active -the one I am on. Thanks..genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu a:active; {
color: #fa5738;
}This is already featured inside the theme, but it’s only setup for Sub Menus. If you look at the Demo and click on the Sub Page 1.1 page right under the Sample link in the Menu, you’ll see the page is highlighted when it’s the active/current page – http://demo.appfinite.net/aspire/sample/sub-page-11/
To make it work for Top level menu links, you can add this –
.genesis-nav-menu .current-menu-item > ato the menu code. If I add this to the demo around line 1315 like this –.genesis-nav-menu a:focus, .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu a:hover { color: #fa5738; }….then it works for any of the top level links.
I’m not sure where in your CSS it would need to be added in since I don’t have a link to your site, but if you can locate and edit the code above it should work fine. If it doesn’t work I’ll definitely need a link to your site in order to see what part of your code needs adjusting.
- The topic ‘Page active CSS on navigation’ is closed to new replies.