- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hello GP Team,
I have an issue with my CSS style below. It applies to my navigation menu.
It was sent to me by David in a previous ticket and worked great till now when I found that if I add another mega-menu to my second primary menu (called “Features”), something breaks.I would like the mega menu of “Features” to look like “Products”.
When I remove David’s code below the second menu “Features” works again.
@media (min-width: 1025px) {
.site-header .inside-header nav#site-navigation,
#sticky-navigation .main-nav {
flex-grow: 1;
}.site-header .inside-header nav#site-navigation div#primary-menu {
width: 100%;
}
.main-navigation ul.menu > li:nth-of-type(1),
.main-navigation ul.menu > li:nth-of-type(5) {
margin-left: auto;
}.main-navigation ul.menu > li:nth-of-type(1) > ul {
min-width: 640px;
}
.main-navigation ul.menu > li {
position: relative;
}
}Thanks a lot for your help.
Customer Support
Hi Adrien,
I see. Can you try updating that code to this?:
@media (min-width: 1025px) { .site-header .inside-header nav#site-navigation, #sticky-navigation .main-nav { flex-grow: 1; } .site-header .inside-header nav#site-navigation div#primary-menu { width: 100%; } .main-navigation ul.menu > li:nth-of-type(1), .main-navigation ul.menu > li:nth-of-type(5) { margin-left: auto; } .main-navigation ul.menu > :is(li:nth-of-type(1),li:nth-of-type(2)) > ul { min-width: 640px; } .main-navigation ul.menu > li { position: relative; } }Let us know how it goes.
Dear Fernando, It worked perfectly thank you very much. However, I have one issue, it seems something is applying to my off panel Mobile menu.
It is hidding the first mega menu column on both “products” and “Features” menus.
Also is it pushing far down to the bottom the links to login and contact.I’ve tried to find out where this was coming from but couldn’t. I feel it’s coming from Mega menu code applying to the mobile off panel menu but not sure.
Do you think you could take a look? Thank you.
Yes, we can take a look. Let’s discuss the first columns not appearing issue first.
The first column of your mega menu sub-menu is not appearing because code-wise, it isn’t there. It’s not added.
How are you adding this mega menu to the off-canvas panel?
I have simply added it through the option in Apparence > Menu as shown on the picture:
https://tinyurl.com/2lvxd58oIn fact Id like the Off canva menu to just list all my menu items without mega-menu styling. Mega menu is only for Desktop.
I see. That’s odd. Perhaps it’s because of the plugin. Can you try creating a new menu specific to just the Off-Canvas menu?
I can’t do that because I have a multi-language site. So i already have one nav per language. This means I will need to also duplicate everything for off panel menu.
Isn’t there a way to make GP Mega-menu (https://docs.generatepress.com/article/building-simple-mega-menu/) compatible with mobile off panel menu?
Customer Support
Hi there,
it’s not really a case of making the CSS compatible.
The simple mega menu is just for primary navigation.
The off-canvas would require completely different CSS as the container layouts are completely different ( eg. Column vs Row ).If you can:
a. remove any off canvas specific mega menu CSS.
b. limit the primary nav mega menus @media(min-width) to 769px so it doesn’t interfere with the off canvas.We can then look at what you need the off canvas to look like.
Thank you very much David. I went back to the simple GP default menu.
You’re welcome
- You must be logged in to reply to this topic.
