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

[sjcwhetton]

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:

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.

[anupam1607]

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.

[Dan-From-Ryviu]

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

[namphan]

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