[Resolved] Assistance with menu and header

Home Forums Support [Resolved] Assistance with menu and header

Home Forums Support Assistance with menu and header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
  • #1625924

    Hi, I am trying to rebuild my site after my developer, who was working with Divi, ran away. I am moving back to Generate Press and have installed GP Premium and Blocks to latest version.

    With all the options, and the ones I would like that aren’t there, could you assist by advising how to recreate this header/nav section?

    1. I have no idea how to get the top blue section in the and above the nav. It consists of a button to the left, a ticker centered, support is manually coded, and account is the woo-account end point. The icons shown come with Divi and I see that fontawesome has been removed from the GP theme. I don’t want remote fonts so I am intending to use the old elegant fonts pack (please advise if this is ok to do).

    2. I have created the basic nav part (white section) but unsure how to align it is shown in the first image. The search is advanced woo search which I can add with shortcode. Just unsure where and how . I am also struggling to have it align like this.

    I know I’m probably asking way too much of you but anything you could do to assist would be tremendously appeciated.

    Thanks and regards


    Thanks I’ll give that a look. For the header would you suggest using an element or a block?

    Customer Support

    Hi there,

    theres a few methods of approaching this, if your confident with the Block Editor then i would recommend:

    1. Install the GenerateBlocks plugin

    2. Create a new Block Element.
    2.1 Build your layout with the GB Blocks.
    2.2 Set the Block Type to Hook > before_header
    2.3 Set the Display Rules to Entire Site.

    Somethings to note:
    1. Make sure there are no empty Text blocks below your new top bar. Gutenberg likes adding them by default – delete them.
    2. The Headline Block supports Shortcodes – not sure how that Ticker is output but it may work within one, if not it will be a Shortcode block.
    3. GB Docs for reference:


    As always, David, you’re help is invaluable. Let me see how I go and I’ll report back to you.


    Customer Support

    You’re welcome πŸ™‚


    I’m so darn close here David. I can’t work out where this <p> is coming from. It adds 1.5em top and bottom padding.

    I know you’ll find it πŸ™‚

    If you want to see all the code it’s on the url to the staging site I added.

    Customer Support

    If you select the Headline block and go to Settings > Spacing you can change the Bottom Margin value to 0 – otherwise it will inherit the Themes Typography Bottom margin ( you should see a greyed out placeholder – which is an estimate of the themes settings ).


    David you’ve been an amazing help and I’ve almost got it as good as it can be.
    I need to keep the logo image on the left but also move the menu over to the left the same as it is on the original site. I figure it’s something to do with flexbox css but I can work it out. At the same time I need to keep the search and and cart logo on the right side, but have them swap places.

    Is this doable?

    Customer Support

    Require a few steps.

    1. I would suggest enabling the Navigation as Header in Customizer > Layout > Header.
    NB. The logo size will be defined by the Menu Item Height.

    2. Customizer > Layout > Primary Navigation, set the alignment to Left.

    3. Now to get the Search before the Cart, means removing the header widget and using a Hook Element to insert the search field/


    3.1 I would recommend using one of the Woo Search plugins like:


    The default WP search is terrible for Woo, and these provide the ajax search your current site has.

    3.2 To position the search inside where the Cart is output you can add the plugin shortcode to this hook: generate_menu_bar_items

    Once thats done let me know and ill take a look at the necessary CSS


    Brilliant. It’s easy when you know the correct combination of settings. πŸ™‚ I’ll get on it right away.

    Customer Support

    I tried the css myself but all I managed to do was waste a lot of time. πŸ™

    Over to you Dave.

    Customer Support

    Looking good πŸ™‚
    To move the Search before the Cart icon try this CSS:

    .main-navigation .menu-bar-items {
        flex-direction: row-reverse;

    All done. Thank you Dave.

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