Change colour of dashicon in Altitude Pro

[James Roberts]

Hi, I need to change the dashicon f347 from white to black as I have a solid white background for my nav. I've managed to change the burger (f333) but I can't seem to change the 'more' arrow. The only place it appears in the CSS is below. The text in the nav is set to black unless it's on hover when it goes green. If it helps, I have Design Palette Pro.

Thanks,

J

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 20px/1 "dashicons";
height: 20px;
padding: 7px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

[ᴅᴀᴠɪᴅ]

You need to do two things;

Edit the code above, just adding color: #333;

so..

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
     color: #333;
     content: "\f347";
     float: right;
     font: normal 20px/1 "dashicons";
     height: 20px;
     padding: 7px 20px;
     right: 0;
     text-align: right;
     z-index: 9999;
}

But then it is being overridden on line 2032, where you'll find this;

.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}

so remove the line '.site-header .genesis-nav-menu.responsive-menu > .menu-item-has-children:before,'
so you get this

.site-header .genesis-nav-menu.responsive-menu .current-menu-item > a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu li a:hover,
	.site-header .genesis-nav-menu.responsive-menu .sub-menu,
	.site-header .genesis-nav-menu.responsive-menu > li:hover > a,
	.site-header .genesis-nav-menu.responsive-menu a:hover {
		color: #fff;
	}

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[James Roberts]

Perfect! Thank you 🙂

[Author]

Posts