How to make NAV & elements & banner image text page width not full width

Store Design
, , , ,

Topic summary

A user seeks to constrain their navigation bar and banner image to a fixed page width (e.g., 1280px) instead of full-width, while keeping elements like logos, pages, and cart aligned consistently.

Current Issue:

  • Nav and banner extend full-width across the screen
  • User wants all header elements to align at the same maximum width

Proposed Solutions:

Three community members offered CSS-based fixes:

  1. Add wrapper class approach: Insert wrapper--full-padded class to the banner-image__inner div and remove position: absolute plus zoom CSS from the theme file

  2. Custom CSS targeting: Add CSS rules to Theme settings targeting #SiteHeader .wrapper and the specific banner section ID, setting max-width: 1280px and margin: 0 auto

  3. Theme.css modification: Edit the theme.css file directly, adding media queries that set banner width to 100% with appropriate padding adjustments for desktop and mobile views

All solutions involve CSS customization but differ in implementation location (theme files vs. custom CSS panel). The discussion remains open with multiple viable approaches presented.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I would like to know how to make both my NAV elements and my Banner Image elements PAGE WIDTH instead of full width, they all sit in-line with eachother.

here’s a screenshot of my nav and banner currently:

Screenshot 2024-11-25 at 12.36.29.png
Screenshot 2024-11-25 at 12.36.29.png5100×1738 1.03 MB

So I would like the ‘Ready, whatever the destination’ and the logos, pages, cart etc, to be page width at 1280px for example, with the rest of the nav and image being wider.

Here’s my website: https://reikabags.co.uk

Any help with this would be much appreciated.

2

Hey @sjcwhetton
I’ve review your website.
You have to add wrapper--full-padded this class in banner-image__inner div.
And remove position: absolute; of .banner-image--zoom-out .banner-image__image-inner css from theme.css file.

Screenshot_4.png
Screenshot_4.png1919×917 345 KB

3

Hi @sjcwhetton

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

#SiteHeader .wrapper, 
#SectionBannerImage--template--22346472325396__section_banner_image_4Nn986 {
max-width: 1280px !important;
margin: 0 auto;
}

Screenshot 2024-11-25 at 15.08.40.png
Screenshot 2024-11-25 at 15.08.40.png3184×2266 834 KB

4

Hi @sjcwhetton ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.banner-image {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media only screen and (min-width: 1024px) {
  .banner-image {
    padding: 0 var(--gutter);
  }
}