How can I make the “Header” in Simple Theme FULL Width to extend to the ends of the webpage? Also, how can I change the color of the “Announcement Bar” at the top of the page. Any help is much appreciated. The website is www.automotivevintage.com
Hi @wm820
Please try to follow these steps:
Step 1. Go to Online Store, select a theme to update, click “…” and select “Edit code”.
Step 2. Open layout/theme.liquid file and add this code snippet before tag.
Step 3. Add this snippets before in the same file.
header.site-header.grid.medium-up--grid--table {
background: #ddd !important;
color: black !important;
}
Of course, you can update the colors as you like.
Hope it will help you.
Regards,
Vinh
Sorry, but that did not work.
Did you add the above code in layout/theme.liquid of the live theme or a backup theme?
Checking the your website, I can’t find the code added.
I did add the first code to the Live site but did not add the second code because I already was able to change the Bar Background Color.
The concept of the above code snippet is to remove “site-wrapper” class from the header section.
If you allow me to access your store’s codebase, I can help you more efficiently. Don’t you mind?
I’d rather not have anyone access my site but thank you anyway for the help.
Then please try with this code.
Sorry, no it did not work.
Let’s use this way:
Hi @wm820
Please go to your store admin > Sale channels > Online Store > Themes > Customize > Theme settings, add this code to Custom CSS
#shopify-section-header .site-wrapper { max-width: 100%; padding: 0; }
#shopify-section-header .site-wrapper .top-bar,
#shopify-section-header .site-wrapper .site-header { padding: 0 30px; }
#shopify-section-header .announcement-bar { background: #333 !impportant; }
Hi @wm820
Please try to follow these steps:
Step 1. Go to Online Store, select a theme to update, click “…” and select “Edit code”.
Step 2. Open layout/theme.liquid file and add this code snippet before tag.
You can also customize the announcement bar by changing its background color and text color. To do this, go to the admin panel, click on Customize, then click on Announcement Bar. There, you should see options to change the colors.
Hope it will help you.
Regards,
This solution worked. Thank you so much for your help.
So please add this code to theme.liquid file, after