- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Looking to change the color of my arrows using code. Haven't been able to figure it out yet. Any help is appreciated!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
and I just want the arrows a different color.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Thanks for getting back to me, @funderbunk1217.
I can't see any arrows on that website. Where specifically are they?
Thanks, Mark
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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>
Which will result in this:
Best of luck, Mark
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Still isn't working I believe
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Still Can't seem to get it working... Man oh man these arrows are driving me mad!!! @MJCS
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
Awesome, @funderbunk1217.
Glad to get that one working for you. Thanks for sticking at it.
regards, Mark
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- 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!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report