Docs

[Robert E]

Hi,

I am using the Integrity stack with a child X-theme template. I have 2 questions regarding the top nav bar.

1) Can you tell me how I can add a button to the right of the nav bar menu options as shown in the attached image file (nav_menu_button.JPG)? I’m referring to the yellow “Get Started” button. I believe it involves adding an additional item to the menu and applying a CSS class, but I need some help with what the CSS would be. Also is it possible to add the vertical line separator to the left of the button?

2) Can you tell me how I can remove the highlight bar from appearing on hover of each of the top nav bar menu items?

Thanks,

-Robert

[Robert E]

This reply has been marked as private.

[Christian]

Hey Robert,

Please add the code below in your Appearance > Customize > Custom > CSS

#menu-item-76 a span {
    color: rgb(15,104,100);
    border-color: rgb(240,213,96);
    background-color: rgb(240,213,96);
    padding: 20px;
    border-radius: 3px;
    transition: all 0.1s
}

#menu-item-76 a span:hover {
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
}

#menu-item-76 a {
    padding-top: 5px;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none !important;
}

Change the menu item id as per your needs (menu-item-76). To get the menu item ID, please see http://wpsites.net/tools/find-nav-menu-item-i-d/

To replicate like exactly in your screenshot, you might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thanks.

[Robert E]

Thanks so much Christian! This was extremely helpful.

-Robert

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts