[Oxley-2014Participant]

Hi everybody,

Following the update (3.2.1) of the X theme something has changed in my navigation menu so I hope it could be fixed…
I am using WordPress 4.1. and then the last version of X.

My navigation bar (menu) looks like this:

http://imageshack.com/a/img903/817/OcD6dD.png

Using the ICON stack when I mouse over an item of the navigation bar, such as “Home” for example, the item block becomes green AND a border appears around the word “Home”. Not a border around the navigation block “Home” but a border just around the word “Home”.
Here is an example.

http://imageshack.com/a/img901/9691/pq2RqE.jpg

I am using the following Custom CSS code:

x-navbar .x-nav>.current-menu-item>a,
.x-navbar .x-nav>.current-menu-item>a:hover,
.x-navbar .x-nav > li > a:hover
{
background-color:
#5faa37
!important;
}

With this same code and before the X theme upgraded ONLY the area bounded by the border around the word “HOME” became green when hovering over. Now as you can see this is the entire navigation block that is green.
And this is not what I want. I would like to have the former result:

http://imageshack.com/a/img631/4785/9rkEoP.jpg

Trying to understand how the code “works” I have used the “inspect element” (Safari) and I saw that there is a “span” tag with each menu item (home, shop, etc). May be it is just normal especially with the ICON stack.
I don’t know. I am not a programmer.
I am pointing this because may be it could help to solve my problem.

So does anybody know how to fix this using the custom code ?

Thank you very much in advance for any help because it is frustrating to discover changes after updating and it is even more frustrating not being able to write the code.

Regards,
Oxley.

[DarshanaModerator]

Hi there,

Thanks for writing in! Could you please provide us with a URL to your site? So that we can check your issue and assist you with a possible workaround.

Thanks!

[Oxley-2014Participant]

Hello,
I am working with a staging site at the moment. So it is not online right now.
This is why I gave links to screen shots that show what I can see.
Again I am using “ICON” and the following Custom CSS code:

x-navbar .x-nav>.current-menu-item>a,
.x-navbar .x-nav>.current-menu-item>a:hover,
.x-navbar .x-nav > li > a:hover
{
background-color:
#5faa37
!important;
}

By the way I don’t receive email alerting me that somebody answered to me.
How can I fix this?

Thanks in advance.
Regards.

[ChristianModerator]

Hey Oxley,

We have modified the Navbar slighty in the recent update for improvement purposes so the old code won’t work. Please change it to

.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 {
background-color: #5faa37 !important;
}

Thanks.

[Oxley-2014Participant]

Hello,
Thank you for your answer.
Unfortunately your code doesn’t work. The menu tab on which I hover over looks like the second picture. I get a green rectangle that covers the whole menu tab and not just the space around the text with rounded left and right borders.

I am using this code for the menu:

x-navbar .x-nav>.current-menu-item>a,
.x-navbar .x-nav>.current-menu-item>a:hover,
.x-navbar .x-nav > li > a:hover
{
background-color:
#5faa37
!important;
}

Followed by this one for the sub-menu:

.x-navbar .sub-menu {

font-size:13px;
font-weight: bold;
background-color:
#5faa37
!important;
border-radius: 15px !important;
}

If you can try something else because I am still stuck 🙁
Thank you in advance.
Regards

[ChristianModerator]

Hey Oxley,

Please give us the URL of your site so we could see the issue live.

Thanks.

[Oxley-2014Participant]

Hello,

As explained above:

I am working with a staging site at the moment. So it is not online right now.
This is why I gave links to screen shots that show what I can see.
Again I am using the “ICON” stack.

Regards.

[Oxley-2014Participant]

Hello,

I don’t know if it helps but inspecting the code I see a Box Model concerning each “tab” of the navigation menu.
I assume defining the background color (when hovering over) of the space delimited (bounded) by the border that seems to apply specifically to the Icon menu tabs could be a solution. I don’t know how to do that. Once again I am just trying to help.
Whatever works will be fine for me 😉

Regards.

[ChristianModerator]

Please try the code below

.x-navbar .desktop .x-nav>.x-active>a>span, .x-navbar .desktop .x-nav>.current-menu-item>a>span {
background: red;
}

Change red as per your needs. Please see http://cloford.com/resources/colours/500col.htm or http://www.color-hex.com/ for more CSS colors.

Thanks.

[Oxley-2014Participant]

Hello,
Thank you for your answer!
Unfortunately your code doesn’t work.
This time the color of the menu tab which I hover over or even click on doesn’t change! 🙁
This is kind of worse than the previous code given. Like if there is no code. :-((

Before being asked a 3rd time for the same thing, I re-precise the situation:
Before the X-update the following code worked:

.x-navbar .x-nav>.current-menu-item>a,
.x-navbar .x-nav>.current-menu-item>a:hover,
.x-navbar .x-nav > li > a:hover
{
background-color:
green
!important;
}

And with this code the result was: http://imageshack.com/a/img537/1904/H3wICy.png

After the update the result is: http://imagizer.imageshack.us/a/img901/9691/pq2RqE.jpg

I can’t give a link to my website since I am still working with a staging site.
The code of the site is the one of the “Icon stack” which I assume you can access by yourself and I JUST use the css custom code given above in order to personalize the navigation menu of my site.

What I can see when inspecting the code of my site is that Icon uses a “Box Model” for the navigation menu items. May be this information could help to find a solution since I assume the “Box Model” is what draws a border around every navigation menu items when hovering over.

Thank you in advance for your help.
Regards.

[SenthilMember]

Hi There,

Thanks for writing again!
I’m sorry to hear that you’re having this issue.

Could you please add the following CSS in your Appearance > Customize > Custom > CSS and it will make the navigation to turn as your previous design.

If it doesn’t work, kindly let us know the URL of the site once you make the site live and we will help you with a tailor-made solution.

.x-navbar .x-nav-wrap .x-nav>li>a:hover>span,
.x-navbar .x-nav-wrap .x-nav>.current-menu-item>a>span,
.x-navbar .x-nav-wrap .x-nav>.current-menu-item>a:hover>span {
	background-color: green !important;
	color: #FFF;
}

Hope it helps, thanks!

[Oxley-2014Participant]

Hello,

Your solution works !
Thank you SOOOO much !!
I am in LOVE again with the X-theme which is logical since today is Valentine’s Day !!!

Again thank you guys for your time and energy.

Regards.

[RadModerator]

You’re always welcome 😉 Happy Valentines!

[Author]

Posts