• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Page active CSS on navigation

Home › Community Forums › Aspire Theme Support › Page active CSS on navigation

Tagged: active, aspire, css, mouse down, navigation

  • This topic has 5 replies, 2 voices, and was last updated 5 years, 9 months ago by Wes.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 13, 2017 at 1:34 am #21536
    wizz3103
    Customer

    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.

    June 13, 2017 at 3:45 pm #21541
    Wes
    Moderator

    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.

    June 14, 2017 at 8:06 am #21552
    wizz3103
    Customer

    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;
    }

    June 15, 2017 at 4:32 pm #21560
    Wes
    Moderator

    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 > a to 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.

    June 16, 2017 at 3:23 am #21562
    wizz3103
    Customer

    Hi Wes,
    Code worked, thanks, all fine now!
    Much appreciated.

    June 17, 2017 at 2:49 pm #21572
    Wes
    Moderator

    You’re Welcome!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Page active CSS on navigation’ is closed to new replies.

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework