Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi Siteorigin,
would like to get help on figuring out how to create a fixed hover effect on menu items based on row IDs through Siteorigin Custom CSS. It should be like Current Page hover but based on row instead. Which CSS class and command should I consider and use for current item?
So far I have been just able to manipulate nav bar hover effect introducing a border hover through this code:
.main-navigation ul li a:hover {
border-bottom: 3px solid red;
border-top: 3px solid red;
border-left:3px red;
border-right:3px red;
}
Anyway I’m experiencing problem with this, because nav bar is increasing once hovered by border amount. Is there any way to stop the border inside nav bar without increasing its size?
Thanks,
Mario
Hi Mario,
Unfortunately, this isn’t possible without a fair amount of custom coding. This is beyond the scope of what we can help you with on the forums, but you could hire a developer to implement this for you.
We highly recommend using Codeable.
To get around the movement you have to set a border width for the base version and just not show it until the user hovers. Something like this:
.main-navigation ul li a { border: 3px solid transparent; } .main-navigation ul li a:hover { border: 3px solid red; }By the way, as you’re a premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on your Dashboard. Please reference this thread and include your SiteOrigin order key in the email.