Menu item spacing

[Brentnauer]

How best would I spread my main menu items out across the available header space? I want to use all available space.

Thanks

[Kyle – SUPPORT]

Not sure which header you are using but try:

nav#main-navigation .menu > li {
  padding: 0 20px 20px;
}

If you want to edit the space you will need to alter the second value (20px)

– Kyle

[Brentnauer]

Hi Kyle,

Unfortunately this didn’t seem to have any effect. I’m using header option 2 if that helps any.

What I’m trying to achieve is similar to the navigation here: https://www.kimbellart.org — All the navigation items are centered and are padded to take up all available space.

Thanks

[Kyle – SUPPORT]

Try adding this instead:

nav#main-navigation .menu.full-width > li:first-child {
  padding: 0 20px 20px 0;
}
nav#main-navigation .menu.full-width > li {
  padding: 0 20px 20px;
}

– Kyle

[Brentnauer]

Still nothing – Absolutely no change in the menu’s appearance.

[Kyle – SUPPORT]

I’ve tested that code and it works fine. Please provide your link so that I can look into it for you.

– Kyle

[Brentnauer]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok this should definitely work:

nav .menu > li {
  padding: 0 20px 20px!important;
}

– Kyle

[Brentnauer]

That did the trick, thanks!

[Kyle – SUPPORT]

Great! No problem 🙂

[Brentnauer]

This reply has been marked as private.

[Kyle – SUPPORT]

Ok change it to:

@media only screen and (min-width: 1200px) { 
nav .menu > li {
  padding: 0 20px 20px!important;
}
}

– Kyle

[Brentnauer]

I love you, Kyle.

One more question: What would the CSS be if I wanted to make adjustments on the tablet-width (the next breakpoint down from full width).

This works perfect, thanks.

[Kyle – SUPPORT]

The width of tablet is 768, so if you want to apply styles for above tablet, add min-width:768; and if you want it to be tablet and less and max-width:768;

Hope this helps

– Kyle