[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
    Posts
  • #1655939
    Jamie

    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?

    Thanks,
    Jamie

    ——-
    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

    —-
    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%;
    }


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

    #1656213
    Leo
    Staff
    Customer Support

    Hi Jamie,

    The easiest method now is to use the block element with the help of grid/container blocks from GenerateBlocks:
    https://docs.generatepress.com/article/block-element-overview/
    https://docs.generateblocks.com/article/grid-overview/
    https://docs.generateblocks.com/article/container-overview/

    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">
        </a>
    </div>

    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.