[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
    Posts
  • #1625924
    Andrew

    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
    Andrew

    #1625950
    Dom
    #1625988
    Andrew

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

    #1626109
    David
    Staff
    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:
    https://docs.generateblocks.com

    #1626126
    Andrew

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

    Thanks

    #1626159
    David
    Staff
    Customer Support

    You’re welcome πŸ™‚

    #1626264
    Andrew

    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.
    https://pasteboard.co/JKwFl4M.jpg

    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.

    #1626577
    David
    Staff
    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 ).

    #1627103
    Andrew

    David you’ve been an amazing help and I’ve almost got it as good as it can be.
    But…
    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?

    #1627325
    David
    Staff
    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/

    https://docs.generatepress.com/article/hooks-element-overview/

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

    https://wordpress.org/plugins/advanced-woo-search/
    https://wordpress.org/plugins/ajax-search-for-woocommerce/

    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

    #1627528
    Andrew

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

    #1627569
    David
    Staff
    Customer Support
    #1627977
    Andrew

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

    Over to you Dave.

    #1627991
    David
    Staff
    Customer Support

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

    .main-navigation .menu-bar-items {
        flex-direction: row-reverse;
    }
    #1628466
    Andrew

    All done. Thank you Dave.

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