Make a full screen full width navigation in Dawn Theme

[abitsleepy]

Hello everyone, I need some help about navigation bar :

Here’s my website https://abitsleepy.com/
and here’s pretty much the reference https://world.skallstudio.com/

1. Is there any way to make top navigation bar full width rather than limited to container?

2. I need my logo to stay at the center but the menu move to the sides, and it’ll make my navigation thinner and fresh. By the way, how can I move the “Search” to the right side?

[MarinaPetrovic]

Hi @abitsleepy , if this is the result you’d like to get:

Add this code (base.css or theme.css):

.header__inline-menu{
width:100%;
}

Find this in your base.css file:
.header–top-center .header__inline-menu>.list-menu–inline{

justify-content:center;

}

and change it to:

.header–top-center .header__inline-menu>.list-menu–inline{

justify-content:space-between;

}

FInd this element:
.list-menu–inline{

display:inline-flex;

flex-wrap:wrap;

}

And change it to:

.list-menu–inline{

display:flex;

flex-wrap:wrap;

}

And last, find this element:

, and change it with: .

Hope this helps.

If you find my answers helpful, please like or mark resolved.

[abitsleepy]

I need mine to be like this

[abitsleepy]

Could you help me please ?

[abitsleepy]

@MarinaPetrovic Hello, I need your help

[MarinaPetrovic]

Hi @abitsleepy , find this element in your base.css file:

.header--middle-left {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: auto 1fr 1fr;
    column-gap: 2rem;
}

Replace it with:

.header--middle-left {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
}

After that, find this element ( probably sections > header.liquid

and change it with:

.

Add this to your base.css:

.header__menu-item{
padding:5px!important;
}

Here is the result: