how to change color of navigation icon (css? file?)

  • Resolved alexanderdd

    (@alexanderdd)


    1 year ago

    Hello,

    Unfortunately the developer of the theme I use is not active anymore, so I cannot contact them directly. Also, questions in the theme support forum don’t get answered even after years, so I will try here.

    When I open https://www.demokratische-schule-x.de with a small-width window, the navigation bar is hidden behind a grey hamburger-symbol. Grey is hard to see on dark green background. How do I change the color of that symbol from grey to black? Do I use css, or is it an image file that I can change?

    I tried to find out the class via Firefox webtools, looks like the class is “icon-bar”, so I tried putting this into custom css:

    icon-bar {
	color:black
}

    This did not change the color.

    Do you have any ideas?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Three reasons why your code does not work:

    1. You left out the dot (.) in the class selector
    2. Your code is trying to change the wrong property. From the theme’s CSS, the correct property is “background-color”, and not “color”.
    3. Even after fixing #1 & #2 above, the class .icon-bar is not specific enough, so something will override it.

    One way to fix #3, is to add the !important flag, so it becomes:

    .icon-bar {
    background-color: black !important;
}

    Another way is to simply use a more specific selector, like:

    .navbar-default .navbar-toggle .icon-bar {
 background-color: black;
}

    Either code should work: flip a coin and use one, but not both.

    Good luck!

    Thread Starter alexanderdd

    (@alexanderdd)

    Wow that was quick!

    And it worked, thank you! I used the first suggestion.

    And I learned a little more about CSS ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘how to change color of navigation icon (css? file?)’ is closed to new replies.