[Support request] How can I change letter spacing in a heading or menu item

[Jagoba]

Hi,

First of all, sorry for my English…I´ll do my best.
I would like to customize the spacing between letter in the main menu and some headings…any help?

Thanks!

[David]

Hi there,

looks like you’re using Elementor for the menus and the content.
Each of their widgets has Letter Spacing controls on the Typography settings.

Let me know

[Jagoba]

Hi,

No, I am building a new website with Thrive Architect (I “have to” for some reasons…) and I have to build the menus with Generatepress, that is why I am asking 😉

[David]

So for the menu letter spacing this CSS:

.main-navigation .main-nav ul li a {
	letter-spacing: 0.1em;
}

You can do the same for the headings, if the Theme controls them:

h2 {
	letter-spacing: 0.1em;
}

[Jagoba]

Great! And the text in the footer?
Many thanks!

[David]

You can target all of the footer content like so:

.site-footer {
	letter-spacing: 0.1em;
}

Or specifics e.g paragraph tag:

.site-footer p {
	letter-spacing: 0.1em;
}

[Jagoba]

Great, thanks!!

[David]

You’re welcome

[Tony]

hi Gp,

I know this is an old post, but I’ve just inserted the above code for letter spacing for the main navigation, and it works great.

I’ve adjusted it to 4.4px on mine. however, when I view on tablet mode, the letter spacing is way to big and the main menu items flow down below…how to I do it so it automatically adjusts itself to fit screen on tablet as well.

[Leo]

Any chance you can open a new topic for your question?

Thanks 🙂

[Author]

Posts