CSS to reduce size of menu cells

melanieianderson · Member · Sep 25, 2015 at 3:47 am
Copy link

Add topic to favorites
Hi,

I’m using custom CSS with the sketch theme and when the menu button appears and is clicked on (resized web browser or mobile device), on the drop down of the links, the cells size within the menu are huge. Can I reduce the size of the cell within the menu using CSS?

Thanks so much!
Melanie

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 25, 2015 at 6:44 pm
Copy link
Hi, add the following and then adjust the top and bottom padding values. One thing to keep in mind is that the generous spacing on the menu items is to make it easier for people to tap the items with their fingers, so you don’t want to tighten things up too much or it could well make it more difficult for your visitors on mobile devices to navigate around your site.
```
.main-navigation a {
    padding-top: 13px;
    padding-bottom: 14px;
}
```
thesacredpath · Member · Sep 25, 2015 at 6:45 pm
Copy link
Should have mentioned that you can add the top and bottom padding to the left padding rule I gave you in the other thread so that it looks like this.
```
.main-navigation a {
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 14px;
}
```
melanieianderson · Member · Sep 25, 2015 at 10:45 pm
Copy link
Awesome, thank you! :)
thesacredpath · Member · Sep 25, 2015 at 11:20 pm
Copy link
You are welcome.

No items found.