Main nav styles and colors

Support
#1

Hi there,

Looking for some help on my main navigation setup.

On https://consensusapp.wpengine.com, I’m using the following to control the styles of the links:

.ubermenu a {
color: #D264DD !important;
border: 3px !important;
border-color: #D264DD !important;
padding: 15px !important;
background-color: #1D2B42 !important;
}

.ubermenu a:hover {
font-size: 14px;
padding: 5px;
color: #D264DD !important;
text-decoration: none;
font-weight: normal;
background-color: #ffffff !important;
transition: all 0.15s linear;
}

However, I’m not getting the border I expect in the non-hover state, and I can’t figure out why.

I’m guessing this is related to why I still need !important, but I thought I had cleared out all the Ubermenu styles for the links themselves.

If you can point me in the right direction, I’d appreciate it. Thank you!

#3

Hi,

Do you want to add border to your menu items in non hover state?

If so, you can try this code instead.

.ubermenu a {
   color: #D264DD !important;
    border:3px solid #D264DD !important;
    padding: 15px !important;
    background-color: #1D2B42 !important;
}

For your reference, you may refer to the link below

https://www.w3schools.com/css/css_border.asp

Hope that helps.

#4

Paul,

Thank you! Making great progress here. I got the nav 90% of the way there–the rollovers and such are creating a really nice experience.

I have a final challenge that I’ve struggled with here. I need to the get the two icons to sit more closely together: https://www.evernote.com/l/AO4_hypBr6xBvIQLTeTu8QkLyvatrPAF07k.

They’re #menu-item-332 and #menu-item-333, and I’ve tried styling them and reducing the margins, but I’m not getting these two items to move more closely together. Can you point me in the right direction here–do I have a admin setting that’s blocking this?

Thank you!

#5

Hello There,

To get the two menu icons close to each other, feel free to use this code:

.ubermenu-item-332 a,
.ubermenu-item-333 a {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

Hope this helps. Kindly let us know.

#6

Oh, I see. The ubermenu class instead of the WP id. Got it.

This worked great–thank you very much!

#7

You’re welcome.