[Resolved] Customize Simple Mega Menu

Home Forums Support Customize Simple Mega Menu

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1508065
    Sara Genone

    Hi
    I have created simple mega menu like the menu described here
    https://docs.generatepress.com/article/building-simple-mega-menu/
    the results is here https://sviluppo.socialmela.it/sviluppo/
    View under “Indagini Aziendali”
    Now I want to personalize it.
    Particularly I would be to add spacing on the left to start with the child element title exactly under the parent item “indagini aziendali”
    and also I would add left colored bar bewteen columns (as the border left) and also add a border at the bottom
    I tryed by my self but without success …
    here my code for example

    nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    width: 20%;
    vertical-align: top;
    padding-bottom: 30px;
    border-width:2px;
    border-left-color: #4471b3;
    }

    I want to create something like this: https://www.dogma.it/it/home (click on NVESTIGAZIONI)
    Could you help me ?
    Thank you in advance
    Sara

    #1508521
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like you’re using a mega menu plugin now – did you get this resolved?

    #1509014
    Sara Genone

    Hi Tom
    Finally I decided to use this plugin 🙂
    Although I have some problems in mobile and tablet view.
    Can you check here from mobile or tablet https://sviluppo.socialmela.it/sviluppo/ ?
    How can I remove the toggle menu and the css styles of the GeneratePress Theme only for mobile view?
    Is it possible?
    Thanks in advance for reply
    Sara

    #1509126
    David
    Staff
    Customer Support

    Hi there,

    try:

    1. changing the Customizer > Layout > Primary Navigation –> Mobile Menu Breakpoint to 0
    2. Disable the Mobile Header in Customizer > Layout > Header

    In theory this should stop the GP Mobile Menu from appearing and just leave you with the Mega Menus output.

    #1509135
    Sara Genone

    Thank you!

    #1509137
    David
    Staff
    Customer Support
    #1509178
    Sara Genone

    Another question about menu..
    could I remove padding or margin in the secondary menu as indicated in this image?
    https://www.dropbox.com/home/Public?preview=REMOVE+MARGIN+OR+PADDING.jpg
    Thank you in advance
    Sara

    #1509215
    Sara Genone

    Dear Tom and David
    I uninstalled the mega menu plugin after I do the page speed test with Google and I saw the worst results … I want to use your “simple mega menu code”
    Now I rewrite you my request for help 🙂

    Particularly I would be to add spacing on the left to start with the child element title exactly under the parent item “indagini aziendali”
    and also I would add left colored bar bewteen columns (as the border left) and also add a border at the bottom
    I tryed by my self but without success …
    Thank you in advance for help
    Sara

    #1509738
    David
    Staff
    Customer Support

    Do you want the white background of the Mega Menu to be full width? As this is tricky to do.
    Or would it be ok if the white background is just the width of the Menus ?

    #1509841
    Sara Genone

    The second one if possible 🙂
    Sara

    #1509920
    David
    Staff
    Customer Support

    Ok thats easier.
    Will need to fix your shadows after this but go to the Customizer > Layout > Primary Navigation and set the Inner Navigation Width to Contained.

    Let me know

    #1509984
    Sara Genone

    Ok it works 🙂
    And now how about the shadow … and other issues
    – colored bar bewteen columns
    – a border at the bottom
    (if possible)
    Thank you!

    #1510235
    Elvin
    Staff
    Customer Support

    And now how about the shadow … and other issues

    I’m not sure what you mean by this? Any particular style you want for the shadow? i.e, appear only on bottom, change color, range etc?

    As for the colored borders, we can use pseudoelements.

    Try this CSS code:

    .main-nav > .sf-menu > li > ul.sub-menu:after {
        content: '';
        height: 3px;
        background-color: blue;
        width: 100%;
        display: block;
        margin-bottom: 5px;
    }
    
    .main-nav > .sf-menu > li > ul.sub-menu > li {
        margin: 15px 0 15px 0;
    
    }
    .main-nav > .sf-menu > li > ul.sub-menu > li:before {
        content: '';
        height: 100%;
        background-color: blue;
        width: 3px;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

    Just change the background color from blue to your preferred color.

    A wise man once said:
    "Have you cleared your cache?"

    #1510677
    Sara Genone

    Thank you Elvin!
    Your code works fine.
    A couple of things about menus
    Please take a look at this image: https://www.dropbox.com/s/gqcqtg2rljs2skr/Primary%20and%20Secondary%20menu.png?dl=0
    I would like :
    1) to remove shadow effect at the right and left side of the primary menu bar (as indicated by red arrows)
    2) and to add 5px padding at the top of secondary menu

    Could you help me?
    Thanks in advance
    Sara

    #1510909
    David
    Staff
    Customer Support

    1. Change this CSS:

    .secondary-navigation, .site-header, #mobile-header, .main-navigation .inside-navigation {
        position: relative;
        box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43);
    }

    to:

    .secondary-navigation, .site-header, #mobile-header, .main-navigation {
        position: relative;
        box-shadow: 0px 1px 3px 2px rgba(0,0,0,0.43);
    }

    2. Add this CSS :

    .secondary-navigation {
    padding: 5px 0;
    }

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