Archived topic
Problem with vertical menu
7 replies · Started by Alberto on November 6, 2019
Hi
First of all, sorry for my English.
I have a problem with the vertical drop-down menu. It is a menu that has many items, therefore it lengthens a lot down. This makes the submenues of the last items overlap the footer, which does not look good.
Is there any way for the last submenues to open up?
I am interested in maintaining that those from above continue to open downwards.
Thank you in advance.
Hi there,
could you provide a link to the site?
You can edit your first post in this topic and use the Site URL field to share it privately.
Hi David.
I already put the url.
Thanks!
Can you add a custom CSS Class to that particular parent menu item of: hover-up
And then try this CSS:
@media (min-width: 769px) {
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.hover-up:hover ul {
display: grid;
grid-template-columns: 50% 50%;
width: 400px;
transform: translateY(calc(-100% + 40px));
}
}David,
It does not work...
I have other css codes configured ... maybe that's the problem ...
This is the code:
@media (min-width: 768px) {
.inside-wc-product-image {
width: 100%;
}
.woocommerce ul.products li.product a img {
height: 200px; /* adjust height */
object-fit: cover;
}
}
.woocommerce ul.products li.product h2 {
line-height: 2.5ex;
height: 7.5ex;
overflow: hidden;
}
.inside-right-sidebar {
display: flex;
flex-direction: column;
}
.inside-right-sidebar .widget {
order: -1;
}
.inside-right-sidebar .secondary-navigation {
margin-top: 30px;
}
.site-header {
-webkit-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
-moz-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
z-index: 1000;
}
.sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
-moz-box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
box-shadow: 0px 10px 10px -7px rgba(102,102,102,1);
z-index: 1000;
}
@media (min-width: 769px) {
.dropdown-hover .widget-area .secondary-navigation:not(.toggled) ul li.hover-up:hover ul {
display: grid;
grid-template-columns: 50% 50%;
width: 400px;
transform: translateY(calc(-100% + 40px));
}
}You need to add the CSS class of hover-up to that parent menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes.
If you can add that and the CSS and if theres a problem, leave it in place and let me know.
Spectacular!
Now it works!
Thanks a lot, David!
Awesome - glad to be of help - i thought 2 columns would help otherwise it flowed off the top of the page lol.
