Add a Line or Border Around Your Navbar

This code adds a line underneath each menu item. You can change the border-left, right, bottom, etc as you'd like. The padding command adds 7 pixels on the top and bottom and 0 pixels on the left and right. Feel free to change this to suite your desires. The first number in the padding is the top, the second number is right, the 3rd is bottom, and the 4th is left.

/* Add a line underneath each link in the menu (nav) bar */
.sm-page-widget-nav-toplink, .sm-page-widget-nav-toplink:last-child {
  border-bottom: 1px solid #595959 !important;
  padding: 7px 0px 7px 0px !important;
  width: 90%;
  margin-bottom: 0px !important;


  • Brian Jones

    on November 11, 2015

    I'd like to place a simple white box or border around my nav link, just like the box round your Code above. I'd also like to thicken and brighten the box lines. I'm no CSS person but I know how to place it on SmugMug page.

  • Chris Needham

    on April 9, 2014

    Found the code in dgrin. Sorry to clutter up your comments page. Thanks for all of your good smugmug deeds!

  • Chris Needham

    on April 2, 2014

    Thanks for the CSS code to customize the vertical navbar- and your instructions in DGRIN on how to put the code in the advanced theme CSS. I don't see any changes in the flyout sub menu though- is there a way to customize its appearance? As a default I would like to shamelessly steal the look on your page! My page is .
    Thanks for your help,

Powered by SmugMug Owner Log In