More spacing in my menu?

Hi Tha?s,
I’m not sure the menu items are too squeezed in, but here’s a bit of CSS that will increase the margin in-between.

Make sure you use a custom CSS editor to add your modifications, otherwise you’ll lose them the next time you update your theme. If your theme doesn’t provide a custom CSS editor or a child theme out of the box, install a plugin, like this one hosted here on the repository:
https://www.ads-software.com/plugins/simple-custom-css/

.main-navigation li {
    margin-right: 16px;
}

I hope this helps ??
– Maria Antonietta

Hi Maria Antonietta!

Well, they aren’t “too” squeezed in, but I’d like the words to be more spaced from one another.
So instead of:

HOME WORKS ABOUT CONTACT

It’d be more of:

HOME WORKS ABOUT CONTACT

I tried the CSS you shared in my Custom CSS editor but it didn’t work unfortunately.

Thank you so much for your help though!

Ok well sorry the spacing I tried putting above didn’t work :o)

So I tried using the firebug to change the padding of my titles, I then copy pasted the CSS code into a Custom CSS plugin:

element {
}
.main-navigation a {
display: block;
text-decoration: none;
color: #333;
line-height: 1;
padding: 15px 50px;
}

But no change, nothing!( other CSS codes I pasted in there worked earlier.)
The problem is that I can’t seem to be able to create a child theme because I can’t connect my firezilla to my website, so can’t change the coding in a child theme.

Out of curiosity, I tried changing the padding directly in the original theme’s editor, and it didn’t change anything on the website either… even though I can clearly see the padding increasing and decreasing when I manipulate the px in my firebug’s inspector.

Update: Managed uploading my child team, pasted the same code in my style.css

element {
}
.main-navigation a {
display: block;
text-decoration: none;
color: #333;
line-height: 1;
padding: 15px 50px;
}

But still no change!

Any one has any idea on how to get at this?

Hi Tha?s,
I’ve just come back and found your messages. I visited your page again and it seems to me the menu items are quite spaced out, at least with respect to the way they were.

Perhaps you’re seeing a cached page. Try reloading while emptying the cache (Ctrl + F5).

Hi Maria,
No they are indeed already neatly spaced out, but I’d like them to be even further apart from each other. Now they are spaced out at padding: 15px 20px, but i’d like them to be padding: 15px 50px
??

Perhaps you’ve already solved the issue: I’ve just accessed your site and the padding value for the a tag is 15px 50px. If I delete the CSS rule for the padding using Firebug I can see the menu items coming much closer together, therefore I gather the CSS is working as expected.

If you feel the issue persists, don’t hesitate to post again.

Hi Maria,
When you sent me this message a day ago, the padding was still 20px on my side, but somehow today it finally switched to 50! Super super weird.
Thank you so much for your help ??

Not at all, the problem (or the solution?) somehow eluded me this time.

Have a great weekend!