Changing color of menu icon and search icon of Inspiro

  • Resolved oszsan

    (@oszsan)


    3 years, 6 months ago

    Hello,

    About changing color of navigation menu icon (3 borders icon) and search icon, white to black.

    I changed background color of header menu to white.
    I also changed font color of header menu to black.
    They turn to those colors when I scroll down.
    But navi menu icon(3 borders icon) and search icon keep staying white.

    Would you help me to change these icons color to black when I scroll down?

    • This topic was modified 3 years, 6 months ago by oszsan.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ina

    (@inamoro)

    3 years, 6 months ago

    Hi, @oszsan

    Add the following code to Appearance -> Customize -> Additional CSS:

    .sb-search .sb-search-button-close .sb-icon-search .svg-icon, .sb-search .sb-search-button-open .sb-icon-search .svg-icon {
    fill: #000;
}

.navbar-toggle .icon-bar {
    background: #000;
}
    Thread Starter oszsan

    (@oszsan)

    3 years, 6 months ago

    Hi @inamoro,

    The code you gave me changes icon color to black from the top.

    I want to change color after scroll down.
    I have already addd this code,

    @media screen and (min-width: 48em) {
    .has-header-image.home.blog .headroom–not-top .navbar, .has-header-image.inspiro-front-page .headroom–not-top .navbar, .has-header-video.home.blog .headroom–not-top .navbar, .has-header-video.inspiro-front-page .headroom–not-top .navbar {
    background: rgba(255 255 255 / 90%);
    color: #000;
    }
    }

    and it’s working perfectly for text color as you can see my website.
    But it’s not working to search icon and menu icon.
    I want to change icon’s color as same as text color.

    Would you let me know some other things to solve this problem?

    Best regards.

    Ina

    (@inamoro)

    3 years, 6 months ago

    @oszsan replace the previous code with this one:

    @media screen and (min-width: 48em) {
  .site-header.headroom--not-top .navbar-toggle .icon-bar {
    background: #000;
}

     .site-header.headroom--not-top .sb-search .sb-search-button-open .sb-icon-search .svg-icon {
    fill: #000;
}
}
    Thread Starter oszsan

    (@oszsan)

    3 years, 6 months ago

    @inamoro　thnak you for the code. It worked.

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

The topic ‘Changing color of menu icon and search icon of Inspiro’ is closed to new replies.