Daily Dish Pro Triangle on Sub Nav Menu

[pmilton]

I'd really love to change the color of this little triangle. I already changed the background color from black to white, but now the triangle that points to the main menu item is still black.

Any help is much appreciated. My website is Ummi's House. The one menu item that has a sub nav menu right now is labeled "Cooking".

http://www.ummishouse.com

[DTHkelly]

Some reference:

How to Add Arrow Indicators to Genesis Navigation Menus

Add css to change color to suit.

[pmilton]

I was really hoping that that'd do the trick, but unfortunately it didn't work. I think I really need to find the element that is creating this triangle and I haven't been able to narrow it down.
Thank you for the link, that will be really helpful for other projects!

[cyanoorange]

Same thing. I am searching where the triangle/arrow is implemented (I would like to change the symbol). Could anybody help with this?

[pmilton]

Unfortunately still nothing. It's driving me nuts.

[cyanoorange]

I found the solution!!!
Its a CSS Triangle Trick https://css-tricks.com/snippets/css/css-triangle/
For the daily dish template it means the following:

change the border-bottom-color (outline)
media="all"
.nav-primary .genesis-nav-menu .sub-menu:before {
border-bottom-color: #222;
}
change the border-bottom-color (fill)
media="all"
.nav-primary .genesis-nav-menu .sub-menu:after {
border-bottom-color: #222;
}

change the size of the triangle with border-width here
media="all"
.genesis-nav-menu .sub-menu:before {
border-width: 11px;
margin-left: -11px;
}

and here
media="all"
.genesis-nav-menu .sub-menu:after {
border-width: 10px;
margin-left: -10px;
}
if you want to delete the triangle, you have to do it here:
media="all"
.genesis-nav-menu .sub-menu:after, .genesis-nav-menu .sub-menu:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

Hope this helps

[pmilton]

Very awesome!! I just made the change it worked perfectly. Thanks so much! What is your website address that uses this theme? I'd love to take a peak.

[cyanoorange]

Great, that it worked for you. Right now the page I am working on is just locally installed. I can post it, if its online.
Best wishes

[Author]

Posts