- This topic has 20 replies, 4 voices, and was last updated 3 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
October 28, 2020 at 8:07 am #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 examplenav .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
SaraOctober 28, 2020 at 1:54 pm #1508521Tom
Lead DeveloperLead DeveloperHi 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-developmentOctober 29, 2020 at 3:42 am #1509014Sara 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
SaraOctober 29, 2020 at 5:09 am #1509126David
StaffCustomer SupportHi there,
try:
1. changing the Customizer > Layout > Primary Navigation –> Mobile Menu Breakpoint to 0
2. Disable the Mobile Header in Customizer > Layout > HeaderIn 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/October 29, 2020 at 5:28 am #1509135Sara Genone
Thank you!
October 29, 2020 at 5:29 am #1509137David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 29, 2020 at 6:02 am #1509178Sara 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
SaraOctober 29, 2020 at 6:46 am #1509215Sara 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
SaraOctober 29, 2020 at 8:01 am #1509738David
StaffCustomer SupportDo 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/October 29, 2020 at 9:05 am #1509841Sara Genone
The second one if possible 🙂
SaraOctober 29, 2020 at 10:23 am #1509920David
StaffCustomer SupportOk 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/October 29, 2020 at 11:14 am #1509984Sara 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!October 29, 2020 at 3:11 pm #1510235Elvin
StaffCustomer SupportAnd 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?"October 30, 2020 at 3:48 am #1510677Sara 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 menuCould you help me?
Thanks in advance
SaraOctober 30, 2020 at 7:20 am #1510909David
StaffCustomer Support1. 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/ -
AuthorPosts
- You must be logged in to reply to this topic.