[Support request] Centre menu and Mega Menu

Home Forums Support [Support request] Centre menu and Mega Menu

Home Forums Support Centre menu and Mega Menu

  • This topic has 6 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #2055080
    Spencer

    Hi there,

    I am trying to create a menu like the attached image (this is how far I have got) – https://drive.google.com/file/d/1FwmpLqJuZUv0ZdeZdsKNuLzNx3SfakzQ/view?usp=sharing

    What I want to do is –
    1) Centre the 3 menu items and leave the button and hamburger menu to the right
    2) add the Mega Menu to the centred menu items.

    I’m not sure if I should remove the Button which is a menu item and add a button via a hook? so that simplifies separating the menu?

    also the width of the mega menu seems to be determined by the main menu, is it possible to make the mega menu full width?

    Many thanks!

    #2055091
    Spencer

    Hi there,

    Further to above – I have removed the button that was created as a menu item using CSS. Added the button back using a hook generate_inside_navigation and then used order : 1 etc to swap the button and hamburger icon around so it looks the same as the image but the button is now separate from the menu.

    Now I just need to centre the Primary menu and make the mega menu full width.

    Cheers!

    #2055093
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know 🙂

    #2055104
    Spencer

    Hi Leo,

    Yes, I have just deployed it from the local to the dev server – https://kh.medev.com.au

    Thanks!

    #2055403
    David
    Staff
    Customer Support

    Hi there,

    in the Simple Mega Menu CSS – the first rule in the @media query is:

    nav .main-nav .mega-menu {
        position: static;
    }

    Replace that with:

    nav .main-nav .mega-menu,
    .inside-navigation {
        position: static;
    }
    
    .inside-header {
        position: relative;
    }
    
    .nav-float-right #site-navigation,
    .main-navigation .inside-navigation {
        flex: 1;
    }
    
    .main-navigation .main-nav {
        margin: auto;
    }
    #2056112
    Spencer

    Hi David,

    Thank you, that worked a treat.

    Cheers!

    #2056557
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.