full width space in navbar / menu and evenly distribute menu items to fill out whole navbar

[frittata_studio]

Hi @arminunruh

thank you for that, I tried it and it does not seem to work, I show what I got:

[frittata_studio]

@arminunruh not sure if this is correct, but doing the code in this way it does the job:

nav.primary{
width: 100%;
display: flex;
}

nav.primary li{
width: 32vw;
display: flex;
justify-content: space-between;
}

What do you think?

[arminunruh]

oh yea you can do it like that too

mh

[frittata_studio]

@arminunruh Fantastic, thank you so much for your help

[frittata_studio]

@arminunruh sorry Armin, quick question

I edited the code in this way in the end:

nav.primary{
    width: 95%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}


nav.primary li{
    display: block;
    padding-right: 9vw;
    padding-left: 9vw;
}

But there is still something strange in that, basically, I would like to have the first text aligned to the margin left and the last voice in the menu should be aligned at the margin right.

If you look the navbar at this moment, they are all evenly spaced but they are all centered.

There is a way to update it?

Thanks!

[frittata_studio]

Fixed!

In case someone needs it:

nav.primary{
    width: 97.5vw;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap
}

nav.primary ul{
    display: flex;
    justify-content: space-between;
    flex: 1;
}

[arminunruh]

nice! very good

[panteley]

@frittata_studio @arminunruh Hey, is it possible to add a certain spacing from the edges of the screen, left and right, in % or px? So they stick whithin website's frame spacing when you resize the browser 🤔

[arminunruh]

@frittata_studio said in full width space in navbar / menu and evenly distribute menu items to fill out whole navbar:

nav.primary{
width: 97.5vw;

the width: 97.5vw determines the width of the nav

just do

nav.primary{
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap
    padding-left: 0.5%;
    padding-right: 0.5%;
    box-sizing: border-box;
}

nav.primary ul{
    display: flex;
    justify-content: space-between;
    flex: 1;
}

here im using 0.5% for padding-left and -right, because that is your frame-left and frame-right value

[panteley]

This post is deleted!

[panteley]

[layotto]

Hello
Has anyone done a full width box menu in laytheme before?
Here is an example of what I would like to do … (kind of)
https://www.newexhibitions.com
With the title in the left most box and the menu in boxes streching over the entire width of the screen. Hovering the boxes (not the text only) should show the active link.
I was fiddling with the code above and managed to do boxes with an outline but that was about it.
Any ideas someone?
Thanks,
Peter

[layotto]

haha … just noticed that laytheme.com actually has almost what I am after. Just without the spacers between the boxes

[layotto]

Here is what I've got so far (objective to changes)
https://artdocu.net
I can't get vertical lines and the links are on the text only - not the whole boxes …
Any help appreciated