Archived topic
Navigation Dropdown Styling Issues
3 replies · Started by Derek on February 24, 2021
I have two (what I hope) are simple CSS requests, both related to the navigation.
1. My site is using a mega menu at full width. However, the full width on some resolutions is so wide it makes the menu not very usable (and sometimes it closes when you're hovering the blank sections). I don't want to use a contained menu, because the primary content container is too small for a proper desktop navigation. Is there a CSS snippet that will let me set a maximum width to the mega menu container? Perhaps 1100 px wide?
2. Weird issue when I activate the search box in the primary navigation. It floats the entire thing to the left. Is there a way to center it?
Thank you for your help!
Hi there,
For #1)
You have this CSS:
@media (min-width: 769px) {
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}
}Try changing it to this:
@media (min-width: 769px) {
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
max-width: 1100px;
left: 50% !important;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
}
}For #2)
Add this CSS:
form.search-form.navigation-search.nav-search-active {
display: flex;
justify-content: center;
}The GeneratePress CSS gods have saved me yet again...THANK YOU SO MUCH!
I wrestled with this for hours to no avail.
Thank you so much.
No problem. Glad you got it sorted. :D
