Promotion image

Full Width Header?

15 1 1

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

Accepted Solution (1)

555 114 111

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 </body> tag.

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all elements with the class 'site-header'
  var headers = document.querySelectorAll('.site-header');

  // Iterate over each element with the 'site-header' class
  headers.forEach(function(header) {
    // Get the parent element
    var parent = header.parentElement;

    // Check if the parent exists
    if (parent) {
      // Remove the class 'site-wrapper'
      parent.classList.remove('site-wrapper');
    }
  });

  // Select all elements with the class 'top-bar'
  var topBarElements = document.querySelectorAll('.top-bar');

  // Iterate over each element with the 'top-bar' class
  topBarElements.forEach(function(element) {
    // Add the class 'site-wrapper'
    element.classList.add('site-wrapper');
  });
});
</script>

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,

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

View solution in original post

Replies 14 (14)

130 27 25

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 </body> tag.

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Get the first div with the class "site-wrapper" within the "#shopify-section-header"
  var firstSiteWrapper = document.querySelector("#shopify-section-header .site-wrapper");

  // Remove the "site-wrapper" class from the element
  firstSiteWrapper.classList.remove("site-wrapper");
});
</script>

Step 3. Add this snippets before </head> 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

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

15 1 1

Sorry, but that did not work.

130 27 25

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.

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

15 1 1

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.

130 27 25

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?

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

15 1 1

I'd rather not have anyone access my site but thank you anyway for the help.

130 27 25

Then please try with this code.

<script>
var intervalId;

function checkAndModifyElement() {
  // Get the first div with the class "site-wrapper" within the "#shopify-section-header"
  var firstSiteWrapper = document.querySelector("#shopify-section-header .site-wrapper");

  if (firstSiteWrapper) {
    // Remove the "site-wrapper" class from the element
    firstSiteWrapper.classList.remove("site-wrapper");

    // Clear the interval
    clearInterval(intervalId);
  }
}

document.addEventListener("DOMContentLoaded", function() {
  // Check and modify the element every 500ms
  intervalId = setInterval(checkAndModifyElement, 500);
});
</script>

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

15 1 1

Sorry, no it did not work.

130 27 25

Let's use this way:

<style>
.site-wrapper:has(.site-header) {
    max-width: unset;
    width: 100%;
    margin: 0;
    padding: 0;
}
</style>

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

11549 2260 2445

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; }

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

15 1 1

Thank you for this solution but when I try to "Save" the update, I get an error message.

11549 2260 2445

So please add this code to theme.liquid file, after <head>

<style>
#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; }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

555 114 111

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 </body> tag.

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Select all elements with the class 'site-header'
  var headers = document.querySelectorAll('.site-header');

  // Iterate over each element with the 'site-header' class
  headers.forEach(function(header) {
    // Get the parent element
    var parent = header.parentElement;

    // Check if the parent exists
    if (parent) {
      // Remove the class 'site-wrapper'
      parent.classList.remove('site-wrapper');
    }
  });

  // Select all elements with the class 'top-bar'
  var topBarElements = document.querySelectorAll('.top-bar');

  // Iterate over each element with the 'top-bar' class
  topBarElements.forEach(function(element) {
    // Add the class 'site-wrapper'
    element.classList.add('site-wrapper');
  });
});
</script>

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,

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify

15 1 1

This solution worked. Thank you so much for your help.

Community Blog Articles

Members of March '25

Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...

By JasonH Apr 1, 2025

The power of automation: New Shopify Flow fundamentals learning path

Discover how to increase the efficiency of commerce operations with Shopify Academy's l...

By Jacqui Mar 26, 2025

Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025