Full width header + navigation position

  • Resolved Eivind

    (@eivsemb)


    6 years, 1 month ago

    Hey!

    I am currently rebuilding the entire website using GP/GB and I’m facing some issues with designing the header.

    I want to have a full width header with logo on the left side, the menu in the center, and then two buttons on the right side. I am using the header widget with custom html for the two buttons, and I have also specified “Header width” and “Inner header width” as Full. “Navigation location” is set to Float Right (no option for float center?).

    I want the header to look like this:
    https://coinpanda.io/

    This is what I have managed so far:
    https://dev.coinpanda.io/

    I don’t understand why the header is still contained when I have specified “Full”. The navigation is also shown below the logo / widget which it should not be.

    Any tips? Thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Tom

    (@edge22)

    6 years, 1 month ago

    Hi there,

    It looks like your site header is set to contained. If you set that to “Full” you should be able to use this CSS:

    .inside-header {
    display: flex;
    align-items: center;
}

.site-logo {
    order: 1;
}

#site-navigation {
    order: 2;
    margin-left: auto;
    margin-right: auto;
}

.nav-float-right .header-widget {
    order: 3;
    top: 0;
}

    Hope this helps 🙂

    Thread Starter Eivind

    (@eivsemb)

    6 years, 1 month ago

    Thanks, that solved the issue with centering the navigation!

    I figured out why the header wasn’t full width myself: I’m using header element (merge with content to get transparent header), and I just had to select Full width for Container (Page Hero tab) to display as full width.

    Regards

    Theme Author Tom

    (@edge22)

    6 years, 1 month ago

    Glad you got it all working 🙂

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Full width header + navigation position’ is closed to new replies.