#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 12 posts - 1 through 12 (of 12 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

    Robert Linger

    All of my questions were previously answered and applied, but I have a new issue. We needed to add a banner at the top of the header and to do so I had to increase the size of the header. That put the Menu item out of alignment with the rest of the navigation. How can I update the CSS to align it properly with the rest of the menu navigation? Also, it changes with the sticky header but again does not align with the rest of the navigation.

    Amir Rather Support Team

    Hi

    I added the below CSS as well

    .a-sticky #menu-item-3817 {
        height: 49px !important;
        line-height: inherit !important;
        margin-top: 1px;
    }

    Please check now.

    Regards

    Robert Linger

    Thank you! Looks perfect

    Alexander Hutsol Support Team

    Hello,

    You are welcome ūüôā

    Feel free to create a new topic if you have any other questions.

     

    Regards.

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