Center Navigation Menu and Expand Search Bar to Full Width

[atomicshinji]

How to make search bar full width and center the menu? (dawn theme). I would like to center the navigation menu and make the search bar full-width. Please refer to the attached image for reference.

[steve_michael2]

Hello! 

Please share "Store URL". 

Thanks.

[atomicshinji]

Hi Steve!

Please see below URL:
https://1bc201-61.myshopify.com/

[steve_michael2]

Hi

This URL need password for further process

[atomicshinji]

Please use below password:
eashal

[steve_michael2]

1) Go to Online Store
2) Edit Code
3) Find base.css file
4) Add the following code in the bottom

.search__input.field__input {
    padding-right: 9.8rem;
    width: 100vh;
}

// Center align menu bar //

.header__inline-menu {
        margin-top: 1.05rem;
        display: flex;
        justify-content: center;
    }

 Thanks

[atomicshinji]

Hi there!

header search bar is now full width but the dropdown seems off.
Also, inline menu code didn't work.

[atomicshinji]

I already fixed the dropdown issue by adding the following code:
predictive-search[open] .predictive-search {
position: absolute;
min-width: 768px;
left: unset;
transform: translateX(0%);

The last issue is with the menu—how can I center it?
Appreciate your help!

[steve_michael2 · Accepted solution]

@media screen and (min-width: 990px) {
    .header:not(.header--middle-left,.header--middle-center) .header__inline-menu {
        margin-top: 1.05rem;
        display: flex !important;
        justify-content: center;
    }
}

) Go to Online Store
2) Edit Code
3) Find base.css file
4) Add the following code in the bottom

[atomicshinji]

This works!
I appreciate your help! Thank you so much!

[atomicshinji]

Hi Shekinah!

I look forward to your feedback and suggestions on how to improve it.

[websensepro]

Hi
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

.list-menu--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

Save Changes.

If my reply is helpful, kindly click like and mark it as an accepted solution.

[atomicshinji]

It didn't work—did I miss something?

[websensepro]

Please add this  code at the bottom ( base.css file )
I hope this work for you

[atomicshinji]

This works as well!
I appreciate your help! Thank you so much!