How can I get my header to span full width on the Dawn theme?

[bakeshop12]

Hi,

I’m trying to make my header span the full width on my desktop. When i check inspect element, it shows that the div ‘header-wrapper color-background-1 gradient’ is taking up the rest of the space which is why i can’t make the menu go all the way across the screen. I’ve tried to search for it when changing the css to see if it can be changed but i can’t locate it. So far this is the css i’ve added:

span {
font-size: 16px;
color: F3F3F3;
}
.header__inline-menu {
background-color: #fdf5ff;
text-align: center;
width: 100%;
}

Any help would be appreciated

[Moeed]

Hey @bakeshop12

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[bakeshop12]

Thank you,

https://elmisbakeshop.myshopify.com/

awmeap

[Moeed]

Hey @bakeshop12

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[bakeshop12]

Thanks Moeed,

Is there anyway to extend it all the way to the end. I’ve included a picture for reference:

[Made4uo-Ribe]

Hi @bakeshop12

Check this one,

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

header.header.header--top-center.header--mobile-center.page-width.header--has-menu {
    padding-right: 0px;
    padding-left: 0px;
}
details-modal.header__search, .menu-drawer-container {
    padding-left: 5rem;
}
.header__icons {
    padding-right: 5rem;
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[bakeshop12]

That’s weird, it doesn’t seem to do anything when i put that code in:

I went back to remove the custom css width i added onto the header because i want to add just your code in the base.css but it doesn’t change to full width :

[Made4uo-Ribe]

Im sorry, but I didnt add the width. I just take out the spaces on you last comment. The whole header is already full width with moeeds code. Now the inline menu is also full width with the remaining space on the left and right are the paddings. That is what my code provide. Just let me know what design you like to achieve. Thanks!

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[bakeshop12]

I’ve added the width back to the custom css and it works full width.

Thank you both!

[Made4uo-Ribe]

Your always welcome.

[WaxOn_WD1045]

If I may resurrect this thread.. I’m having a very similar issue with my store’s header. I think the code in the message I’m replying to is mostly right for my store (also on Dawn theme) because it fixes the right-side Cart & Search icons… but it does not change my logo and navigation menu on the left-side at all. I am using the navigation menu style “Dropdown” if that has anything to do with it..?

Any help is hugely appreciated!!