Top Nav Menu Format

• 

  shopdayco · Member · Jun 23, 2017 at 9:10 pm

  • Copy link
  • Add topic to favorites

  Is there any way to modify the top nav menu in a theme? I’d like to do the following:

  1. align to the center
  2. make font and overall nav menu/header height shorter.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jun 26, 2017 at 5:36 pm

  • Copy link

  Hi there, you can give the following custom CSS a try. On centering, we can do that as long as the menu has not gone to two lines, as yours is. When it goes to two lines, it breaks the centering CSS and it returns to left aligned.

  We can adjust the line height and the bottom padding a bit to tighten things up with the following custom CSS.

  .main-navigation ul:not(.children) > li > a {
  	padding-bottom: 7px;
  }
  .main-navigation a {
  	line-height: 1;
  }

  We could tighten up the left and right padding a bit too, but it doesn’t gain us enough to go to one line, and even it it did, the menu would be on one line for screens/windows about 1170px and wider.

  I did play a bit with a few other ideas. You can try the following instead, which takes away the upper case and adjusts the let and right padding.

  .main-navigation ul:not(.children) > li > a {
  	padding-bottom: 7px;
  	padding-right: 10px;
  	padding-left: 15px;
  }
  .main-navigation a {
  	line-height: 2.58;
  	text-transform: none;
  	font-size: 105%;
  }

• 

  shopdayco · Member · Jun 26, 2017 at 6:15 pm

  • Copy link

  Thanks! This is a great start. What about the sub menus? How can I update the font size on those to match? I ended up setting the font size to 80%, though this makes the search icon look a little odd/out of place up there. Can that be fixed too?

  Also, the site title/name – how can I adjust that as well? I’d like to reduce the padding there.

• 

  thesacredpath · Member · Jun 27, 2017 at 12:31 am

  • Copy link

  To adjust the submenu font sizes, add the following.

  .main-navigation ul ul.children a, .main-navigation ul ul.sub-menu a {
    font-size: 80%;
  }