Social Icons on Menu Bar

Questions › Category: Customization › Social Icons on Menu Bar
0 Vote Up Vote Down
Meaghan asked 5 years ago

How do I adjust the social icon settings on the black menu bar that shows when you scroll down.

1 Answers
0 Vote Up Vote Down
Support Team Staff answered 5 years ago

Which theme are you using?

Meaghan replied 5 years ago

Sorry this is for Hello Rose

Support Team Staff replied 5 years ago

There are two ways to do it. The first would be to create a circle of white (or a color) around your black icon. This you can do within the plugins widget settings. The other option to have it look like the demo is to add code to your theme. The code you would need to add would be based on which Social Icon # it is for that spot. Could you email your URL, to support@helloyoudesigns.com? or if you don’t mind you can place it here. Whichever works better.

Meaghan replied 5 years ago

The URL is https://oceansideportraits.com

Support Team Staff replied 5 years ago

It looks like that nav spot is registering as your Social Icon #1. Here is what you can add to your style sheet to have the icons be white when the fixed nav is showing

.nav-primary.fixed #simple-social-icons-1 ul li a {
color: #fff !important;
}

after you add that, go to the widget area itself and remove the white background from the plugin so it does not show when the menu is black. Don’t forget to clear your hosting and browser cache after the changes. Let me know if you have any issues and we can hop on and help.

Meaghan replied 5 years ago

So that seems to have helped change the icon colour to white, however I haven’t been able to figure out how to remove the white background in the widget. I tried making it back to blend in with the background but of course that made the primary have a black background.

Support Team Staff replied 5 years ago

If you go to the widget area, you would delete the background color and leave it empty. That will prevent a background color from showing.

Meaghan replied 5 years ago

Thanks, I got it! Worked perfect. The only thing is there is no hover colour. Other than that it looks 100% better.

Support Team Staff replied 5 years ago

You can add a hover by using this code below where you added the other code, then change the #999 to any hex color you would like.

.nav-primary.fixed #simple-social-icons-1 ul li a:hover {
color: #999 !important;
}