-
Sorry for the inconvenience, but I followed the instructions in this document https://docs.generatepress.com/article/building-simple-mega-menu/ and it didn’t work out. Please take a look at https://onefix.vn/. Let me know if you need the website login information.
PS:”I also searched the forum and saw that you guys said this guide is still valid at this time. I have tried turning off all the plugins but nothing changed.”
Thank you in advance.
-
-
Hi there,
in your CSS you have a
*before the first list.
Delete that as its breaking the CSS. -
Oh my mistake, thank you for correcting me.
-
No problem – glad to be of help
-
Hello again,
I am facing a challenge with implementing scrolling functionality for nested submenus in the mega menu on my website using the GeneratePress theme. Despite using custom CSS to facilitate scrolling when the submenu content exceeds the viewport height, the scroll bar is not appearing.
Despite these settings, the scroll bar for submenus when they exceed the viewport height is not appearing. This issue occurs on smaller desktop screens where the submenu’s length exceeds the screen’s height.
Could you please advise if there’s a theme-specific feature or setting that might be affecting this? Or any additional modifications I could make to ensure the scrolling functionality works as intended?
Attached is screenshots of the issue and the settings in my theme.
Thank you for your assistance.
Best regards,
Here’s the specific CSS I have applied to my Custom CSS:
`.menu-item-20661 {
margin-right: 10px;
}.gb-container-ed4e11fd .gb-inside-container {
padding:0px;
}@media screen and (max-width: 575px){
#__vtigerWebForm tr {
display: flex;
flex-direction: column;
}
#__vtigerWebForm tr input {
width: 100%;
}
}.entry-content,
.entry-summary {
text-align: justify;
}@media (min-width: 769px) {
.main-navigation {
display: flex;
justify-content: center;
width: 100%;
}.menu-bar-items {
flex-grow: 1;
text-align: center;
}nav .main-nav .mega-menu {
position: static;
}nav .main-nav .mega-menu > ul {
position: absolute;
left: 0 !important;
width: 100%;
display: flex;
flex-wrap: wrap;
min-width: 900px;
}nav .main-nav .mega-menu > ul > li {
display: inline-block;
vertical-align: top;
width: 25%;
max-width: 600px;
float: left;
padding: 10px;
}nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}nav .main-nav .mega-menu.mega-menu-col-2 > ul > li {
width: 50%;
}nav .main-nav .mega-menu.mega-menu-col-3 > ul > li {
width: 33.3333%;
}nav .main-nav .mega-menu.mega-menu-col-4 > ul > li {
width: 25%;
}nav .main-nav .mega-menu > ul > li:hover > a,
nav .main-nav .mega-menu > ul > li:focus > a,
nav .main-nav .mega-menu > ul > li[class*=”current-“] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}nav .main-nav .mega-menu ul .sub-menu,
nav .main-nav .mega-menu ul .sub-menu ul {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
max-height: 80vh;
overflow-y: auto;
box-shadow: none;
left: 0;
height: auto;
pointer-events: auto;
transform: none;
padding: 10px 0;
}nav .main-nav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
} -
Hi there,
I couldn’t view the screenshot but there is only one menu that has this issue right?
-
Hi Alvind, all long menus have issue
-
Try adding this CSS to add a scrollbar when the menu overflows the screen height:
#primary-menu .sub-menu li { overflow-y: scroll; } -
After adding the CSS snippet, the menu can now scroll, but there are many strange icons in the menu. Please help me address this issue. https://prnt.sc/hfJbuk-VsbdB
-
I’m not seeing that in my view. What browser do you use?
-
I’m using Chrome without any extensions in Guest Mode: https://prnt.sc/J41QlSsF5MQt
-
Well, that’s odd because I’m using Chrome too, and in Incognito mode, I still can’t see those icons.
Could you try clearing the browser’s cache?
-
I tried clear cache and also ask my friends to visit website but there was still same issue.
-
Unfortunately I’m not seeing that in my Chrome browser:
https://app.screencast.com/0zHWBDFPXeUllThe strange icon might be coming from the scrollbar. You can try this CSS to hide it:
#primary-menu .sub-menu li::-webkit-scrollbar { display: none; }And update the CSS I provided earlier with this code:
#primary-menu .sub-menu li { overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } -
Thank you so much. I just updated the second CSS code without using the addition, but the problem was still perfectly resolved. Thank you once again.
- You must be logged in to reply to this topic.