Archived topic
Make Menu Button match others
4 replies · Started by Chris on August 5, 2022
Hello,
I am having trouble getting the custom-class based menu button to match the existing buttons throughout the page. Like the buttons throughout the page, I want the text of the button to remain white and the background to transition from orange to blue. I am having a couple issues:
- The menu button text on hover defaults to the blue that the other menu items are using, which makes the entire button look solid blue on hover. How do I override the hover text color just for that button? I attempted to add it in the hover CSS section and it didn't seem to work
- When using a transition, the button graphics are quickly going from square to the 30px radius that I selected. I'm unsure of why it is reverting back to a square button for a split second before becoming round. I would like it to transition like the other buttons as I think it looks good that way vs just a simple switch on hover.
Thanks in advance for your help!
One other thing I noticed, I am using sticky menus and want the same settings there as well. It appears as though the button looks good but on hover the blue background is not happening. Thanks again!
Hi Chris,
Let’s address the color first. Try this CSS:
#primary-menu .member-login-nav:hover a{
color: #fff;
background-color: #30bced;
}It worked! And when I added the transition code in that section it worked great. Thanks again for your super prompt help!
You’re welcome Chris!
