Adjust Max Header Width to Match Content

Site URL: https://bricktechstudios.com

Hi, does anyone know how to adjust my site's max header width to match the content max width? I applied a max page width of 1324px and the margin is set to 4vw. I notice that on larger screens, the header is full width, while the content is respecting the max width. My site is on version 7.1 and I've attached a screenshot below.

Thanks!

Add to Page Settings > Advanced > header

<style>
  #page .content-wrapper {
  	max-width: 100%;
    width: 100%;
  }
</style>

@tuanphan Thank you, I tried this and it caused the page content to go the full width of the screen instead of retaining my max site width setting. Is there a way to target the site header specifically to applied the same max site width?

1 hour ago, cvanuch said:

@tuanphan Thank you, I tried this and it caused the page content to go the full width of the screen instead of retaining my max site width setting. Is there a way to target the site header specifically to applied the same max site width?

<style>
  #page .content-wrapper, header#header {
  	max-width: 100%;
    width: 100%;
  }
</style>

@tuanphan Thanks for the reply, the same thing happened. To clarify, I want to move the header inward, to align with the content when shown on a larger display. I already applied a capped page width of 1324px which works fine on the page content, but isn't affecting the header. Here's a screenshot illustrating what I mean.

@tuanphan @rwp Do either of you know how I can shift the header in to match the width of the page content? To clarify, I want to move the header inward, to align with the content when shown on a larger display. I already applied a capped page width of 1324px which works fine on the page content, but isn't affecting the header. Here's a screenshot illustrating what I mean. Thanks!

#header {
    max-width: 1324px;
    margin: auto;
}

@rwp Thanks! It seems to work but the white bar doesn't span the whole width of the screen. Do you know how to expand it? Also, on the Product Gallery page and Product pages, they aren't following the site's max width. Would you know how to adjust their width to match the rest of the site? Here's a screenshot.

This will fix the width, which should make the width of the header correct as well, because the sections won't be wider than it.

section.page-section {
    max-width: 1324px;
    margin: auto;
}

@rwp Worked perfectly! Thank you for your help!

Hi @cvanuch, so how did you do it? I have the same issue but cannot fix it. My site: https://fotograf.business/

Best, Michael

On 1/4/2021 at 10:02 PM, michael1962 said:

Hi @cvanuch, so how did you do it? I have the same issue but cannot fix it. My site: https://fotograf.business/

 

Best, Michael

Hi. Do you still need help on this?