- This topic has 20 replies, 4 voices, and was last updated 3 years, 4 months ago by Elvin.
-
AuthorPosts
-
October 28, 2020 at 8:07 am #1508065Sara 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 #1508521TomLead DeveloperLead DeveloperHi there,
It looks like you’re using a mega menu plugin now – did you get this resolved?
October 29, 2020 at 3:42 am #1509014Sara GenoneHi 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 #1509126DavidStaffCustomer 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.
October 29, 2020 at 5:28 am #1509135Sara GenoneThank you!
October 29, 2020 at 5:29 am #1509137DavidStaffCustomer SupportGlad to be of help
October 29, 2020 at 6:02 am #1509178Sara GenoneAnother 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 GenoneDear 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 #1509738DavidStaffCustomer 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 ?October 29, 2020 at 9:05 am #1509841Sara GenoneThe second one if possible 🙂
SaraOctober 29, 2020 at 10:23 am #1509920DavidStaffCustomer 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
October 29, 2020 at 11:14 am #1509984Sara GenoneOk 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 #1510235ElvinStaffCustomer 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.
October 30, 2020 at 3:48 am #1510677Sara GenoneThank 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 #1510909DavidStaffCustomer 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;
} -
AuthorPosts
- You must be logged in to reply to this topic.