[JamesZLParticipant]

Hi X Theme Support!

Been trying searching around on the forum but couldn’t find anything related to this…

1. I’m using Integriy and my menu text’s are all centered (which can be seen when you hover over them and the line above the menu is showing the full width of the menu)

2. Also, how do I customize the hover effect? I would like to have the line be under the menu instead of over it

3. And how do I change the color of that line?

[JamesZLParticipant]

This reply has been marked as private.

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

1) Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

2) Use following CSS under Custom > CSS in the Customizer to change hover effect and color:

.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: 0 10px 0 #888888;
}

Thanks.

[JamesZLParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please update previous code to :

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0;
    padding-right: 0;
    margin-right: 19px;
}
.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;
    border-bottom: 4px solid rgb(241,149,51);
}

Hope it helps.

[JamesZLParticipant]

Hi, it works great!

The only thing I had to change was padding-left: 0!important;

Now another issue appeared:
How do I shrink the border so it fits the text? The border is too wide on the right side

[Paul RModerator]

Hi,

You can add !important in padding right;

eg.

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 19px;
}
.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;
    border-bottom: 4px solid rgb(241,149,51);
}

Hope that helps

[JamesZLParticipant]

Worked flawlessly!

You guys are great!

[JadeModerator]

You’re most welcome.

[Author]

Posts