CSS to pad menu text

• 

  melanieianderson · Member · Sep 25, 2015 at 3:34 am

  • Copy link
  • Add topic to favorites

  Hi,

  I’m using the Sketch theme with custom CSS. When the menu button appears (when screen size is that of mobile device, etc.), the text links in the menu drop down are right against the left edge of the drop down menu itself. I would like to pad the text so that it looks a little nicer – is there an easy way to do that with CSS?

  Thanks for any help you can provide!

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

• 

  thesacredpath · Member · Sep 25, 2015 at 6:41 pm

  • Copy link

  Hi, give this a try. The first rule is the padding for the top level menu items and the second is for menu items in the submenu. Both have to be adjusted in order to preserve the indent on the submenu items on the touch device menu.

  .main-navigation a {
      padding-left: 20px;
  }
  .main-navigation ul ul li a {
      padding-left: 34px;
  }

• 

  melanieianderson · Member · Sep 25, 2015 at 10:06 pm

  • Copy link

  That worked, thanks so much!! :)

• 

  thesacredpath · Member · Sep 26, 2015 at 7:25 am

  • Copy link

  You are welcome.