x

How to change sub navigation arrow color?

Looking to change the color of my arrows using code. Haven't been able to figure it out yet. Any help is appreciated!

2,074 Views
Message 1 of 17
Report
1 Best Answer

Best Answer

Hi @funderbunk1217,

there must be something further up your CSS that is overiding mine. We need to add !important at the end of each line of CSS raise it in the priority. Can you please replace the other CSS with this:

<style>
.wsite-menu-mobile-arrow:before {
    font-family: 'Poly' !important;
    content: '\203a' !important;
    font-size: 30px !important;
    transform: none !important;
    top: -15px !important;
    left: 20px !important;
    background: none !important;
}
#navmobile .wsite-menu-back-item a {
 color: #7b8387 !important;
}
</style>

If this doesn't work we can try putting it at the bottom of your actual main CSS file through the HTML/CSS editor. In that case you would need to remove the opening and closing <style> </style> tags.

Let me know how you go. We'll get there one way or another, it's just being a bit stubborn!

Cheers, Mark

View Best Answer >

2,228 Views
Message 18 of 17
Report
16 REPLIES 16

Hey there! Our Community can likely point you in the right direction here. What theme are you using?

2,069 Views
Message 18 of 17
Report

Hi @funderbunk1217

please supply your website's address and specifics about what you want to change.

If I understand you you want to change the right arrow that points to more items in a menu? On my site that can be achieved by the following, but I can't be certain it will work on yours until I can inspect your site.

In the Weebly editor click on Settings>SEO and then scroll down to add this to the Header Code window:

<style>
#wsite-menus .wsite-menu-arrow:before {
    color: red !important;
}
</style>

Then click Save, and then Publish. That should do it (change the color to whatever you want), but like I said I can't guarantee it until I inspect your site.

Thanks, Mark

2,062 Views
Message 18 of 17
Report

Thank you! www.juicefienddreamzzz.com
and I just want the arrows a different color.
2,050 Views
Message 18 of 17
Report

2,049 Views
Message 18 of 17
Report

Thanks for getting back to me, @funderbunk1217.

I can't see any arrows on that website. Where specifically are they?

Thanks, Mark

2,047 Views
Message 18 of 17
Report

That's the problem! You can barely see them, they are located to the right of my navigation menu titles, you can't see them because they are an extremely dark grey color. @MJCS

2,039 Views
Message 18 of 17
Report

Hi @funderbunk1217,

sorry - no wonder I couldn't see them! They were close to invisible!

I have a solution that will involve you adding CSS to your site. In the Weebly editor, click on  Settings>SEO and scroll to find the Header Code window. Then add this:

<style>
.wsite-menu-mobile-arrow:before {
    font-family: "Poly" !important;
    content: '\203a';
    font-size: 30px;
    transform: none !important;
    top: -15px;
    left: 20px;
    background: none !important;
}
#navmobile .wsite-menu-back-item a {
color: #7b8387;
} </style>

image

Which will result in this:

image

Best of luck, Mark

2,013 Views
Message 18 of 17
Report

Thanks so much

Tags (1)
2,007 Views
Message 18 of 17
Report

@MJCS

Still isn't working I believe

2,005 Views
Message 18 of 17
Report

Hmmm. That might be me - I think I can see what I did.

Can you change the font-family line to this instead:

    font-family: 'Poly' !important;

I used " instead of ' - my fault.

If that doesn't work you could try leaving out the font-family line altogether. I was trying to use your site's font, but it won't matter too much.

Cheers, Mark

1,686 Views
Message 18 of 17
Report

Still Can't seem to get it working... Man oh man these arrows are driving me mad!!! @MJCS

1,680 Views
Message 18 of 17
Report

Best Answer

Hi @funderbunk1217,

there must be something further up your CSS that is overiding mine. We need to add !important at the end of each line of CSS raise it in the priority. Can you please replace the other CSS with this:

<style>
.wsite-menu-mobile-arrow:before {
    font-family: 'Poly' !important;
    content: '\203a' !important;
    font-size: 30px !important;
    transform: none !important;
    top: -15px !important;
    left: 20px !important;
    background: none !important;
}
#navmobile .wsite-menu-back-item a {
 color: #7b8387 !important;
}
</style>

If this doesn't work we can try putting it at the bottom of your actual main CSS file through the HTML/CSS editor. In that case you would need to remove the opening and closing <style> </style> tags.

Let me know how you go. We'll get there one way or another, it's just being a bit stubborn!

Cheers, Mark

2,229 Views
Message 18 of 17
Report

I could do a backflip! Got them white, and finally edited the color and got them bright green like I wanted. Thanks for all the help Mark, you are a prodigy! 

1,673 Views
Message 18 of 17
Report

Awesome, @funderbunk1217.

Glad to get that one working for you. Thanks for sticking at it.

regards, Mark

1,670 Views
Message 18 of 17
Report

By the way, @funderbunk1217...the reason they're like this '>' instead of the actual arrows is because the other arrows were actually little images, SVG files to be exact. What I did was to remove the link to the image (background: none !important; ) and replace it with the '>' symbol (content: '\203a' !important; ) You could experiement with other shapes in place of \203a if you desire something else. Some fonts however are limited with their character set and may not include all options.

Here's a list of options - see the CSS (ISO) column for codes:

https://brajeshwar.github.io/entities/

Best of luck, Mark

1,665 Views
Message 18 of 17
Report

This is the code that worked for me because the other didn't:

/* Code to make submenu arrows white */
.mobile-nav li.has-submenu > span.icon-caret:before {
position: relative;
display: block;
color: #ffffff;
font-size: 24px;
content: '\203A';
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: -0px !important;
}

You put it either in SEO-header for the whole site or in the header of the individual page.

It was taken from here:

https://community.weebly.com/t5/Themes/Nav-bar-on-mobile-is-hard-to-click-Birdseye/td-p/45096

Cheers!

1,450 Views
Message 18 of 17
Report