Customize Simple Mega Menu

Hi there,

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

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

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.

Thank you!

Glad to be of help

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

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

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 ?

The second one if possible :)
Sara

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

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!

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.

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

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