Docs

[Mobility]

Hello! Here is my staging site: http://6bd.152.myftpupload.com/

I would like to change the color of the upward facing arrow on my last menu item. I’m very close to getting it correct. I would like to make it white, and I have figured out how to target it using this code:

.x-navbar .desktop .x-nav > li#menu-item-1274 > a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 9px solid #fff !important;
    border-color: transparent transparent #fff !important;
    border-width: 0 9px 9px;
    margin-left: -9px;
}

However, when I click to another menu item, the arrow still appears as if it is still active. Am I missing a class in my code? Please advise. Thank you!

[Rupok]

Hi there,

It seems you have added the below code as well :

.x-navbar .desktop .x-nav > #menu-item-1274 > a {
  background: #035487 none repeat scroll 0 0;
  color: white;
}

And this code applying the background and color. I am confused that what you are trying to achieve so can’t provide any tailored code. If you can provide a screenshot of what you are trying to accomplish and take off your custom codes; we might be able to suggest you some code.

Thanks!

[Mobility]

Sure thing. I have removed the custom code.

1) I would like the background of the last menu item to be blue and the text to be white.
2) When the last menu item is actively selected, I would like the :after selector that creates the triangle underneath to be white instead of blue.

It would be similar to how the register menu item is styled, except the triangle would be white. Does that make sense?

Thanks for your help!

[Rue Nel]

Hello There,

Thanks for the updates!

1] To change the background and color of the last menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav #menu-item-1274,
.x-navbar .desktop .x-nav #menu-item-1274 a {
	background-color: blue !important;	
}

.x-navbar .desktop .x-nav #menu-item-1274 span {
    color: #fff !important;
}

2] And to change the color of the triangle, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav #menu-item-1274 a:after {
    border-color: transparent transparent white;
}

Hope this helps. Kindly let us know.

[Author]

Posts