[Resolved] Make Menu Button match others

[Chris]

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!

[Chris]

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!

[Fernando]

Hi Chris,

Let’s address the color first. Try this CSS:

#primary-menu .member-login-nav:hover a{
        color: #fff;
        background-color: #30bced;
    }

[Chris]

It worked! And when I added the transition code in that section it worked great. Thanks again for your super prompt help!

[Fernando]

You’re welcome Chris!

[Author]

Posts