Emphasize the Active Page - Aaron Meyers

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.

Comments

Powered by SmugMug Log In