Navigation Bar - highlight one menu item

[RocktheHouse1876]

Hello,

Trying to figure out how to make a outlined red button in the navigation bar for the “Tickets” menu item. So, it stands out.

As well, when someone clicks on “Tickets” the dropdown sub-menu doesn’t seem to be aligned directly under it? I can’t seem to find a solution for this in the ubermenu, either?

Any help would be so much appreciated!

[nabeel]

Hi there,

Thank you for reaching out to us. First give a class to your menu item “Tickets” by navigating to Appearance > Menus then expand the “Tickets” menu item and in the CSS Classes (optional) field enter standout-menu-item (see screenshot)

If you don’t see the CSS Classes (optional) field you’ll need to first enable it by clicking on Screen Options in the upper right corner of the screen (see screenshot)

In Show advanced menu properties section enable CSS Classes option (see screenshot)

You can then add the following code in the Theme Options > CSS:

.standout-menu-item > a > span {
    border: 2px solid red;
    padding: 20px;
}

.standout-menu-item > a {
    padding-top: 15px !important;
}

.standout-menu-item .sub-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}

Above code will also align the drop down menu too. If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[RocktheHouse1876]

Thank you for your kindness. The css name has been added to the menu structure and the CSS added to theme css , but did not see a change… What would be missing? I’ve been over this with a fine tooth comb!

[paul.r]

Hi,

There is a syntax error in your code.

Please add a close curly bracket before adding the code provided by my colleague and remove double quote in width:100%

This is the correct syntax

@media (max-width:979px) {
    .x-btn-navbar {
        color: #222222 !important;
    }
    .iframe {
        overflow: hidden;
        border: 0 !important;
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
     }      
}  /* THIS BRACKET WAS MISSING IN YOUR CSS CODE */

.standout-menu-item > a > span {
    border: 2px solid red;
    padding: 20px;
}

.standout-menu-item > a {
    padding-top: 15px !important;
}

.standout-menu-item .sub-menu {
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}

Hope that helps

[RocktheHouse1876]

That’s it… thank you Paul!

[Prasant]

You are most welcome.