How do I reduce padding for the buttons in the main navigation?

adrianstouffer · Member · Nov 17, 2014 at 8:34 pm
Copy link

Add topic to favorites
Right now, in the Twenty Twelve theme, there is a 15px padding around each main navigational button. I am having trouble adjusting it. This does not work, for example:

.current_page_item {
padding-right: 10px;
padding-left: 10px;
}

It just seems to add additional padding to the button rather than override the padding.

HELP!

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Nov 18, 2014 at 2:45 pm
Copy link
I can’t see your site as it is set to private but when checking the default settings of the Twenty Twelve theme there is a margin applied to each link in the navigation menu to keep them spaced apart. There is also padding applied to the sub-menu lists, but not 15px. The rule applied is:
```
.main-navigation li ul li a {
  padding: 0.571429rem 0.714286rem;
}
```
which works out to 8px and 10px respectively. If that’s what you mean then you can just change the values in the code example above. If not can you clarify what you are trying to achieve?
adrianstouffer · Member · Nov 19, 2014 at 1:40 am
Copy link
I basically want the padding around each button to be less. It can’t be viewed in DOM explorer for me, but to the right, the dimensions of the current element’s box model are editable in preview. It allows me to see what reducing the padding would look like. I just can’t seem to figure out the rule for CSS.

Here is what it looks like:
https://creeswelding.files.wordpress.com/2014/11/padding.jpg

Sorry to be confusing, I am new at this.
hallluke · Member · Nov 19, 2014 at 12:23 pm
Copy link
I can’t see that image as your site is set to private, could you upload it to a public image sharing service instead?
adrianstouffer · Member · Nov 19, 2014 at 3:50 pm
Copy link
Sorry about that. Thanks for your help. A staff member suggested:
```
#access a {
	padding: 0 15px;
}
```
It worked!

No items found.