Home>Support>page layout for header, 3 columns

page layout for header, 3 columns

By Will Webb, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

I’ve disabled my logo and set the row inside the header to full width stretched.

I added the code snippet to set max-width to 100% too.

I have 3 widgets inside the row all set to 33% for each column but they all group together in the middle of the page,

has anyone got a snippet or show me an example where they set the first column to be positioned fixed to the left, middle column to be set in the middle and the right column to be fixed to the right?

Site is not live as i’m just testing offline.

Thanks for any help :)

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Will

    Please try this removing the existing CSS snippet and adding this

    .hgroup {
    max-width: 100% !important;
}

    Let us know how you get on

    Magus

  2. 9 years, 3 months ago Will Webb

    Hi Magus,

    sadly this just shifts all three widgets to the right side

    so I have reverted back to this

    #masthead .hgroup #header-sidebar {
width: 100% !important;
}

    This results in the three widgets to sit cantered along side eachother

    the nearest example I could find relates to Thread: Changing Vantage Site Header Layout

    But rather than the three grouping in the middle, I would of preferred a solution where:

    First widget would sit on the far left
    Second widget sits centered
    Third widget sits on far right

  3. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Will

    Are you using the boxed layout of the full width layout

    Magus

  4. 9 years, 3 months ago Will Webb

    Hi Magus,

    Under Theme Settings I have it set to Full Width.

    If it helps…
    It sits nicely when the screen width is around 1000px as because they are centered it counter balances it, but when the browser stretches to 1900px for example you can clearly notice they are centered as per the thread I referenced too.

    Thanks for the quick reply.

  5. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hey Will. There is a fair bit to this.

    I’m not using the Layout Builder, just the regular widget area in the header:

    #masthead .hgroup .logo { display: none; }
body.responsive.layout-full #page-wrapper .full-container:first-of-type { max-width: 100%; }
#masthead .hgroup #header-sidebar { width: 100%; }
#masthead .hgroup #header-sidebar aside { width: 610px; }
#masthead .hgroup #header-sidebar aside:nth-of-type(1) {
  left: 0;
  position: absolute;
}
#masthead .hgroup #header-sidebar aside:nth-of-type(2) {
  left: 50%;
  margin-left: -305px;
  position: absolute;
}
#masthead .hgroup #header-sidebar aside:nth-of-type(3) {
  right: 0%;
  position: absolute;
}

    Hopefully that gets your imagination firing and helps get the job done :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More