
Emphasize the Active Page in the Navbar
SmugMug has been so kind as to provide a mechanism in the menubar for highlighting the active page. The active page is the page that user has clicked on and is currently viewing. In the example above, the user has clicked on "land" and the "land" link in the navbar is given a different color. You may apply any normal CSS function to the active page. You may bold it, give it a different color, give it a different border, give it a background color, etc. Note that the Active Page is not set for links created in the Menu Content block using the "Custom URL" option. If you have selected "Page I Choose...", "Homepage", "Search", etc it will work. The Active Page identifier is also not returned in the "Accordion" menu. It only works for "horizontal" and "vertical" navbars. Add the following code to your theme's Advanced CSS section:
Emphasize the Active Page
/* Make the menu nav bar text for the active page a different color */ .sm-page-widget-nav-activepage > a { color: #E3E3E3 !important; } /* Make the menu nav bar hover text for the active page a different color */ .sm-page-widget-nav-activepage > a:hover { color: #FFFFFF !important; }
Emphasize the Parent Links
/* Make the parent link in the navbar a different color */ .sm-page-widget-nav-hasactivepage > a { color: #E3E3E3 !important; } /* Make the parent link in the navbar have a different hover color */ .sm-page-widget-nav-hasactivepage > a:hover { color: #FFFFFF !important; }Parameters can be changed as desired.
Jesse King
on September 21, 2015Hey thanks for these CSS tweaks, they've really helped me get some of my customizations off the ground. Thanks for sharing the knowledge!
Miguel Alonso
on September 8, 2015Great code! Many thanks!
Is it possible to emphasize a third level? That is parent, child and 'grand-child'.