Docs

[Nuera]

I am creating a site that I would like to generally appear in a boxed layout. However, as a point of flair, I’d like to occasionally include some full-width elements.

So the layouts would generally look something like this:
Header (boxed)
Cornerstone Section (fullwidth)
Body content (boxed)
Footer (boxed)

Is possible?

– OR –

Could I alternatively set my header and footer to appear boxed in a full width layout?

Thanks!

[Friech]

Hi There,

Thanks for writing in! Please do the alternative it is more feasible with custom CSS. Provide us the site URL so we can take a closer look.

Hope it helps, Cheers!

[Nuera]

This reply has been marked as private.

[Christian]

Hey Nuera,

Please make the layout Fullwidth first then we’ll give you the CSS to make the header and footer boxed.

Thanks.

[Nuera]

Haha… ok. It’s ready.

[Rupok]

Hi there,

What you are trying to achieve is pretty unusual and I don’t think it will look good. However you can try this CSS to achieve this :

.x-navbar, .x-colophon.bottom {
  margin: 0 auto;
  max-width: 1200px;
  width: 88%;
}

If you see white background on header, it’s because of the 120px height you have set for the Navbar and also you have the below code :

.x-navbar-wrap {
  margin-bottom: -60px;
}

You can just update this to :

.x-navbar-wrap {
  margin-bottom: -120px;
}

Hope this makes sense.

[Nuera]

Thank you Rupok. I got pulled off this project for a few days, but I’m back.

The top is how I had envisioned it, but I think you’re right that the bottom/footer looks a little bizarre.

Is there any way to make JUST the navbar boxed, and let everything else on the site remain full-width?

Thank you for your assistance 🙂

[Joao]

Hi There,

Change this code:

.x-navbar, .x-colophon.bottom {
  margin: 0 auto;
  max-width: 1200px;
  width: 88%;
}

For this:

.x-navbar {
  margin: 0 auto;
  max-width: 1200px;
  width: 88%;
}

Hope it helps

Joao

[Nuera]

Perfect, thanks so much 🙂

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts