On https://bransonjetboats.com sSome of my main navigation items have a submenu of secondary items when you hover over them (adventures, book now, location). This submenu pops up well below the menu item, below the main header. Is there a way to make this submenu appear immediately below the menu icon so it appears attached?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks as usual for the quick reply--that fix works great when I'm at the top of the page, but as I scroll down and the header shrinks, that puts the submenus overlapping the top menu now. Any way I can have the best of both worlds and have the submenu stay in the same relative position regardless of the header size? Thanks!
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.small-nav ul.sub-menu {
margin-top: auto !important;
}
Just noticed a problem with this fix--on the mobile view now, submenus overlap the main menu. Is there anyway to make this fix only apply to the full-screen view? Screenshot attached of what is happening. Thanks!
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
ul.sub-menu {
margin-top: 0px !important;
}
}
On https://bransonjetboats.com sSome of my main navigation items have a submenu of secondary items when you hover over them (adventures, book now, location). This submenu pops up well below the menu item, below the main header. Is there a way to make this submenu appear immediately below the menu icon so it appears attached?
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
ul.sub-menu { margin-top: -60px; }Thanks
ThemeNectar Support Team
Thanks as usual for the quick reply--that fix works great when I'm at the top of the page, but as I scroll down and the header shrinks, that puts the submenus overlapping the top menu now. Any way I can have the best of both worlds and have the submenu stay in the same relative position regardless of the header size? Thanks!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.small-nav ul.sub-menu { margin-top: auto !important; }Thanks
ThemeNectar Support Team
That worked, thanks!
Just noticed a problem with this fix--on the mobile view now, submenus overlap the main menu. Is there anyway to make this fix only apply to the full-screen view? Screenshot attached of what is happening. Thanks!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 1000px) and (min-width: 1px) { ul.sub-menu { margin-top: 0px !important; } }Thanks
ThemeNectar Support Team
Worked perfectly as always, thanks!