Page active CSS on navigation

Homepage Community Forums Aspire Theme Support Page active CSS on navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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.

      #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.

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

          #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.

            #21562
            wizz3103
            Customer

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

              #21572
              Wes
              Moderator

                You’re Welcome!

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