#128508 How to create background, hover, text colors for a single Main Navigation tab

Landing Forums Jupiter WordPress Theme How to create background, hover, text colors for a single Main Navigation tab

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Robert Linger

    I am trying to draw attention to a single main navigation tab “Careers” at EVOS.com. I tried to install the following Custom CSS in the Theme options area but it did not work when I saved it.

    .menu-item-3817 {
    background: #7FB239 !important;
    border-radius: 5px;
    color: #ffffff !important;
    }

    .menu-item-3817:hover {
    background: #FFA500 !important;
    border-radius: 5px;
    color: #ffffff !important;
    }

    .menu-item-3817 a {
    color: #ffffff !important;
    }

    .menu-item-3817 a:hover {
    color: #000000 !important;
    }

    Can you please help me to make this work?

    Thanks,

    Tatyana Hutsol Support Team

    Hello,

     

    The problem was you marked the menu item as class, but it’s an id, so I changed “.menu-item-3817” to “#menu-item-3817” in your code and the styles are applied now.

    Please check.

     

    Regards.

    Robert Linger

    Thank you!

    It is working, but I see that the background-size is not what I wanted. I want it to wrap around the menu tab more like a medium button. (See the example I attached.)

    How do I accomplish this?

    Tatyana Hutsol Support Team

    Hello,

     

    Please also add this css code:

    #menu-item-3817 {
    height: 50px !important;
    line-height: inherit !important;
    margin-top: 5.5%;
    }

     

    Regards.

    Robert Linger

    Perfect!

    Thank you!

    Tatyana Hutsol Support Team

    You’re welcome!

    Regards.

    Robert Linger

    One more question. How do I change the background color and text color for the mobile menu navigation for Careers? I want the background to be the green color used in the desktop background #7FB239 with white text #ffffff, but I can’t figure out where to do this.

    Nodari Support Team

    Hi Robert

    You can use this css code:

    li#responsive-menu-item-3817 {
        background: #7FB239;
    }

    Please try and let us know if it workes

    Best wishes

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic.
Login