Customize Simple Mega Menu

[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

[Tom]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara Genone]

Thank you!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[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

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara Genone]

The second one if possible 🙂
Sara

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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!

[Elvin]

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?"

[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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts