Change padding/margin on main navigation menu items.

[vpsite]

I would like the menu items to have less space in between them but can’t figure out the correct css style to do this.

I have tried the following and can see the background colors, but the margins/padding doesn’t change:

.menu-item-text {
padding: 0 0 0 0;
margin: 0 0 0 0;
background-color:yellow;
}
nav ul.menu > li.menu-item {
background-color:red;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide us a mockup image with the desired spacing, so we can provide some css?
Thanks

-Rui

[vpsite]

Here is the mockup with the sizing I would like to see on top and the current sizing on the bottom.

Attachments:

You must be logged in to view attached files.

[vpsite]

I added two custom fonts and have selected them in the font options but for some reason they aren’t rendering properly.

[Rui Guerreiro – SUPPORT]

It seems to me you already sorted the spacing issues.
https://www.dropbox.com/s/c3ew7w2m5rz5vqd/Screenshot%202017-01-27%2015.09.47.png?dl=0

Regarding the fonts I can see a 403(Forbidden) error your javascript console.
Check the permissions of the folder and all folder inside wp-content/uploads/redux/

-Rui

[vpsite]

No, the padding issues are not fixed, the spacing needs to be narrower. In the image I attached, the top image is the one I am trying to replicate, the bottom image is how it currently looks. I need the spacing in the red areas to be narrower so it matches the top image which has the text “This is the original design”.

Thanks for figuring out the font issue. Yes, the font file itself has read permission issues and once I re-uploaded the file directly into that directory they are now working.

[Rui Guerreiro – SUPPORT]

in order to be more precise I need the specific measures, can’t trust in my eyes.

-Rui

[vpsite]

So now the padding between the navigation items are 30px and would like that to be about 1/2 that, so 16px.

[David Martin – Support]

You can increase/decrease the padding between menu items with this:

.full-center #header nav.std-menu ul.menu > li > a {
    padding: 0 16px;
}

[vpsite]

Thanks, looks great!

[Rui Guerreiro – SUPPORT]

Great. Thanks David
-Rui