Dawn Theme InLine Menu Width

ccn2 · ‎03-29-2024

I'm trying to figure out how to make the width of the inline menu the width of the page without changing the location of the menu buttons. I'd also like to change the background color of just the menu. Any help is greatly appreciated!

ThePrimeWeb · ‎03-29-2024

Oh!

You mean this?

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change the #d7d7d7 to your preferred colour.

<style>

nav.header__inline-menu:before {
    content: '' !important;
    background: #d7d7d7 !important;
    height: -webkit-fill-available !important;
    height: -moz-available !important;
    height: fill-available !important;
    width: -moz-available !important;
    width: -webkit-fill-available !important;
    width: fill-available !important;
    width: -webkit-fill-available !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
}


ul.list-menu.list-menu--inline {
    position: relative !important;
    z-index: 2 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-29-2024

Hey @ccn2,

Can you share the link to your store and also a screenshot of what you have vs. what you would like to have? An illustration is fine

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ccn2 · ‎03-29-2024

Here's my store

crescentcitynovelties.com

I'd like something like this that will span the width of the page without moving the position of the log or anything else:

ThePrimeWeb · ‎03-29-2024

Are you trying to get full width because of the background or is there any other reason? Because you can have the full background without changing any width etc..

To change the background in full width, do this

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change #d7d7d7 to any colour you like

<style>
.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
    background: #d7d7d7;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ccn2 · ‎03-29-2024

I just want the inline menu to be a different color. I asked about full width because all of the other codes I've tried only change the color but the menu doesn't expand to both ends of the page.

ThePrimeWeb · ‎03-29-2024

Oh!

You mean this?

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Change the #d7d7d7 to your preferred colour.

<style>

nav.header__inline-menu:before {
    content: '' !important;
    background: #d7d7d7 !important;
    height: -webkit-fill-available !important;
    height: -moz-available !important;
    height: fill-available !important;
    width: -moz-available !important;
    width: -webkit-fill-available !important;
    width: fill-available !important;
    width: -webkit-fill-available !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    left: 0 !important;
}


ul.list-menu.list-menu--inline {
    position: relative !important;
    z-index: 2 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ccn2 · ‎03-29-2024

This worked perfectly! Thanks so much!

Lavished · ‎12-15-2024

are you able to help me , I need to delete or modify the old code to make my inline menu full page width. thank you.

here my post. I will buy coffee 😉

Dawn theme Modified Menu bar too wide
https://community.shopify.com/c/shopify-design/dawn-theme-modified-menu-bar-too-wide/m-p/2879911#M75...

Dawn Theme InLine Menu Width