Nav Bar Hover Link Text

Support
#1

Hi,
My default navbar hover link text are not working from my customize settings.

The links are supposed to be red and are displaying white.

How can I fix this?

I would also like my nav bar menu to FLOAT RIGHT so that is not below my logo. My css did not work. Can you PLEASE advise on how I can fix this.

Thank you in advance.

#2

Hey @quituck,

Thank you for reaching out to us. I checked your site and it seems like a third party plugin is conflicting with the theme’s styling. I believe it’s the WR MegaMenu plugin which is overriding the theme’s CSS. I’d suggest you to disable the conflicting plugin and use X native’s mega menu feature instead, Please see https://theme.co/apex/forum/t/features-megamenus/99

Hope this helps!

#3

Yes. I’m using that plugin. Can you please help me to float my nav bar right and center and make the hover text red?

Its a nav bar top link alignment issue I believe.

I tried using this CSS and had some luck moving the text right.

.wr-megamenu-container ul.wr-mega-menu {
z-index: 9999;
float: right;
margin: 0;
padding-left: 30em;
width: 100%;

  • This allowed me to move the links right without floating them however, I want to center/align the nav bar with the logo without adding more padding on the bottom nav bar.

Adding padding-bottom:## makes the nav bar too wide. I want to center the links with the logo. Any ideas how I can do this without having a wider nav bar?

I tried using this css the make the hover links red and I didn’t have any luck. What am I missing?

.wr-megamenu-container a:hover {
color: red;
}

Do you have any suggestions to fix these two issues? It would be greatly appreciated.

Thanks again!

#4

Hello @quituck,

Please remove this custom css code because it is broken and not valid:

.wr-megamenu-container ul.wr-mega-menu {
    z-index: 9999;
    float: right;
    margin: 0;
    padding-left: 30em;
    padding-bottom: ;
    width: 100%;

You can replace it with this code instead:

.wr-megamenu-container ul.wr-mega-menu {
    float: right;
    width: auto !important;
    margin-top: 50px;
    margin-left: auto;
    margin-right: 0;
}

And you use this code for the hover:

.primary_1078 .wr-mega-menu > li:hover > a, 
.primary_1078 .wr-mega-menu > li.focus > a {
    color: red !important;
}

Please understand that the WR MegaMenu is a 3rd party plugin which we do not support. The code above is just simply based on what is displayed in the page source. For more detailed and very informative step by step resolution to your issues while using this menu, we highly recommend that you contact the creators of this plugins because they are more familiar with this.

Thank you for your understanding.

#5

Problem Solved.

Thank you so very much! I really do appreciate all of your help. Your guys are the best! :slight_smile:

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.