[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 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1655939

    I utilized the post on Feb 22, 2019, to get started on this issue. I will copy all of the information below so you have what I started with.

    And for now, my client is happy with what I ended up with. But we may need to do it where the client requested so I just wanted to follow up and find out how to get it where they wanted it.

    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.

    One other question, once I added the new header when I go to customize I am not seeing the page preview on the right of the customize screen, any thoughts on what might be causing that?


    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.


    GeneratePress 2.2.2
    GP Premium 1.7.8

    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:

    Content for first section
    Content for second section
    Content for third section

    Now you just need a little CSS:

    .header-section {
    display: flex;

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

    (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.

    Customer Support

    Hi Jamie,

    The easiest method now is to use the block element with the help of grid/container blocks from GenerateBlocks:

    As for the logo, you can either use an image block in the grid/container block, or use an HTML block with the following content:

    <div class="site-logo">
        <a href="https://HOME-PAGE-LINK" title="SITE TITLE" rel="home">
    	<img class="header-image is-logo-image" alt="SITE TITLE" src="https://LOGO-LINK" title="SITE TITLE" width="0" height="0">

    The same thing can be done for the top bar. You would just need to use the generate_before_header hook.

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