[Support request] Dividing header or top bar into segments

Home Forums Support [Support request] Dividing header or top bar into segments

Home Forums Support Dividing header or top bar into segments

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #818274
    EG

    Hi there,
    Is there any way to divide the top bar and header into segments with certain length (i.e 3 segments with 50%, 30%,20% of the container) and place different widgets in each of them.

    Thanks,
    EG

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #818284
    Tom
    Lead Developer
    Lead Developer

    To do this in the header, you’d likely need to replace the header element with your own header element.

    To do this, you could:

    1. Create a new Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
    2. Set the hook to header and check the “Disable Site Header” checkbox.
    3. In your content area, add this:

    <div class="header-section">
        <div class="header-section-1">
            Content for first section
        </div>
    
        <div class="header-section-2">
            Content for second section
        </div>
    
        <div class="header-section-3">
            Content for third section
        </div>
    </div>

    Now you just need a little CSS:

    .header-section {
        display: flex;
    }
    
    .header-section > div {
        width: 33.33333%;
    }
    
    @media (max-width: 768px) {
        .header-section > div {
            width: 100%;
        }
    }

    Depending on your browser requirements, you might want to run that code through this tool: https://autoprefixer.github.io/

    To add widgets in those sections, you could use a plugin like this: https://wordpress.org/plugins/widget-shortcode/

    Then be sure to check the “Execute Shortcodes” checkbox as well.

    #818408
    EG

    Thank you Tom. Is there any way to divide the header into segments with different lengths (like first segment is 50%, second 20% and third 30%), instead of having 33.333% for each?

    I couldn’t find the “Disable Site Header” checkbox. I added a new elements as hook then chose wp_head option. Is this the right way?

    Lastly how can I contain the length of the header within the container, but full length?

    Thank you, EG

    #818891
    Tom
    Lead Developer
    Lead Developer

    1. First, remove this:

    .header-section > div {
        width: 33.33333%;
    }

    Then add this:

    .header-section-1 {
        width: 50%;
    }
    
    .header-section-2 {
        width: 20%;
    }
    
    .header-section-3 {
        width: 30%;
    }

    2. You’ll want to select the header hook, instead of wp_head.

    3. Not too sure what you mean by the length. Can you explain a bit more?

    Let me know 🙂

    #1655093
    Jamie

    I got this to work on my site but I was wondering if you could help me get the logo into the first section of the header or suggest an alternative to what I have now. the section pushed my logo down and I would like to top align them.

    #1655103
    Ying
    Staff
    Customer Support

    Hi Jamie,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Thanks!

    #1655109
    Jamie

    right now for some reason the covid buttons and forms buttons are below the main menu. In a perfect world it would be a logo section then a middle section with covid buttons and then a right section with forms and licensing and UNCAS programs. I don’t see the private information field

    #1655239
    Elvin
    Staff
    Customer Support

    Hi Jamie,

    The private information text field can only be used by the topic starter.

    That said, Can you open up a new topic for this? So you could use the private information text field to provide us the site details. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1655927
    Jamie

    Hi Elvin,

    Yes, I can start a new topic.

    Thanks, Jamie

    #1658356
    Elvin
    Staff
    Customer Support

    No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

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