[Resolved] Transparent nav at merged header is overwriting my simple css hover color?

Home Forums Support [Resolved] Transparent nav at merged header is overwriting my simple css hover color?

Home Forums Support Transparent nav at merged header is overwriting my simple css hover color?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #261336
    Mitch

    The red menu item should be changing to a darker shade on hover, which it does on the regular menu. On the transparent menu, it seems to default to the header add-on css which is set to transparent. http://www.peperfect.com

    Any idea where I went wrong?

    #261337
    Leo
    Staff
    Customer Support

    Hi Mitch,

    Nice site!

    I’m not quite sure what you meant and wanting to achieve..
    Currently I see the red menu item (Try PE Perfect) goes to transparent when hover, and the 3 other menu items are transparent throughout.
    Can you tell me what CSS you’ve added and what you would like the end result to be?

    #261348
    Mitch

    Thanks! The forum has been a huge help so far.

    If you scroll down to see the sticky menu, the red color on Try PE Perfect should change on hover. I want the same thing to happen in the transparent menu for that item only.

    The CSS for that button is:

    .main-navigation .main-nav ul li.my-course-button a {
    color: #ffffff;
    background-color: #d9232e;
    }

    .main-navigation .main-nav ul .my-course-button.current-menu-item > a,
    .main-navigation .main-nav ul .my-course-button.current-menu-parent > a,
    .main-navigation .main-nav ul .my-course-button.current-menu-ancestor > a {
    color: #ffffff;
    background-color: #d9232e;
    }
    .main-navigation .main-nav ul li.my-course-button > a:hover,
    .main-navigation .main-nav ul li.my-course-button.sfHover > a {
    color: #ffffff;
    background-color: #C11F2A;
    }

    #261360
    Mitch

    I take that back….I would like it to be more like a button, but I couldn’t figure out how to do it.

    Kind of like the sign up button on http://www.clickminded.com

    #261443
    Leo
    Staff
    Customer Support
    #261468
    Tom
    Lead Developer
    Lead Developer

    What I would do is set !important after your custom color background colors (hover and current).

    GP is setting them to transparent like the rest of the menu items, adding !important will make sure GP doesn’t do that.

    #261580
    Mitch

    Great help! Thanks! Check out the results: http://www.peperfect.com/

    #261594
    Mitch

    One last touch up…I want to exclude the mobile menu from this code. I tried .main-navigation:not(.mobile-menu) with no luck. wrong operator?

    #261595
    Leo
    Staff
    Customer Support

    Try wrapping your CSS in this:

    @media (min-width:769px) {
        /* CSS Here */
    }

    Let me know.

    #261616
    Mitch

    Worked great. Thanks guys!

    #261645
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.