[Support request] Evenly space nav menu items

[James]

Hello,
Apologies if this query has already been answered. I was wondering if there is a way to space evening nav menu items in the area they are set to be visible. eg say the primary nav has 5 page links located under the header and alignment is centred. Rather than having them side by side, they would be spaced evenly to occupy the space available in the container?

I hope that makes senses. Thanks in advance for any help that can be provided.

[David]

Hi there,

try this CSS:

@media (min-width: 768px) {
    .main-navigation ul {
        display: flex;
        justify-content: space-between;
        margin-left: -20px;
        margin-right: -20px;
    }
}

[James]

Hello David,
Thank you for the reply. It is not exactly what I am looking to achieve. Ideally I would like the menu items text to occupy the entire container it is within with space padded evenly between.

[David]

can you provide a link to the site. You can edit your original topic and use the Site URL field for privacy.

[James]

Hi David,
I just added the site url

[David]

So you would ideally want the first menu item align hard left and the last menu item align hard right?

The spacing between each of the items is identical to each other as this is the way flex works. The only visual difference is that each menu label is a different length

[James]

So you would ideally want the first menu item align hard left and the last menu item align hard right?

Yes that is correct, first menu hard left, last menu to the right, all items in between evenly spaced based on the available area left.

[David]

Edited the CSS above – should do the trick

[Author]

Posts