[Support request] realign header

Home Forums Support [Support request] realign header

Home Forums Support realign header

  • This topic has 14 replies, 4 voices, and was last updated 4 months ago by David.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #2173355
    Craig

    Hi Guys

    I would like to realign the header but cannot figure out how to do this.

    I would like the logo centered and the burger bars sitting on the left side of the page.

    Are you able to assist with this?

    kind regards

    Craig

    #2173791
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try setting the header alignment to center first?
    https://docs.generatepress.com/article/header-layout/#header-alignment

    Then I’ll provide the CSS to relocate the menu toggle.

    Let me know πŸ™‚

    #2173878
    Craig

    Hi Leo

    The header alignment is and was set to center.

    Thanks

    #2173882
    Leo
    Staff
    Customer Support

    Can you disable the caching plugin first?

    #2173892
    Craig

    I don’t have a specific caching plugin but maybe it’s Jetpack that’s causing issues. I have disabled that.

    #2173980
    Leo
    Staff
    Customer Support

    So basically you want the static header to match the sticky header?

    If so try activating the navigation as header option:

    Then edit this CSS:

    nav#sticky-navigation .navigation-branding {
        position: absolute;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
    }

    to this:

    .main-navigation .navigation-branding {
        position: absolute;
        z-index: 10;
        left: 50%;
        transform: translateX(-50%);
    }
    #2174010
    Craig

    Thx Leo

    That centers the logo. Halfway there. How do I get et the burger menu onto the left side of the page? With this, it is still on the right-hand side of the page.

    Thanks again

    #2174011
    Craig

    Sorry Leo and when scrolling I need the stick menu to be fullscreen.

    #2174025
    Ying
    Staff
    Customer Support

    To move the menu icon to the left, try this CSS:

    .inside-navigation.grid-container {
        justify-content: flex-start;
    }

    To make the sticky menu full width, go to customizer > layout > Primary Navigation, set the Navigation Width to Full.

    #2174046
    Craig

    Thanks Guys you are awsome

    #2174056
    Ying
    Staff
    Customer Support

    Thanks Craig πŸ™‚
    You are welcome!

    #2178480
    Craig

    Hi Guys

    At the moment the logo and menu are part of the Hero.

    I would like the logo and menu to sit at the top, followed by the line banner(sign up), followed by the hero. I am struggling to achieve this.

    Thank you

    #2178497
    David
    Staff
    Customer Support

    Hi there,

    looks like you’re using a Header Element in Appearance > Elements to merge the Site Header and the hero.
    Edit that Header Element, and on the Site Header tab uncheck the Merge with Content option.

    https://docs.generatepress.com/article/transparent-header-and-navigation/

    #2178505
    Craig

    You really are my best πŸ™‚

    Thank you

    #2178506
    David
    Staff
    Customer Support

    Glad we could be of help

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.