How can I change Header icons color with hamburger button

Development

AI-generated summary

The discussion is about changing the header icons color with a hamburger button. ogulcan1787 initially asked for help, providing a link to a relevant topic. Lilly responded with a link to the same topic and another topic on rounding theme components, which may help with ovalizing the edges of the hover box.

ogulcan1787 thanked Lilly and asked about changing the hover color and adding a border radius. ogulcan1787 then shared the code they used to change the hover color and border radius for header icons:

.d-header-icons a:hover {
background-color: #D93A00 !important;
color: white !important;
border-radius: 30px;
}

However, they were unable to change the search button, menu button, and avatar.

Finally, ogulcan1787 shared the code they used to achieve the desired changes for the menu button, search, and avatar:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            border-radius: 4px;
            .d-icon {
                color: white;
            }
             &:hover, &:focus {
                background: #223237;
                .d-icon {
                    color: white;
                }
            }
        }
        &.active .icon .d-icon {
            color: white;
        }
    }
}
1

Hi everyone,

I tried but there are incorrect codes
And can we ovalize the edges of the hover box?
Please help me :heart:

2

changing header icon colors:

rounding theme component - may suit your needs or at least give you ideas in the code on how to do it:

3

Thank you so much @Lilly .
Can we change the color for hover? And border radius code how can i add for hovers ?

4

@Lilly I did ! :slight_smile:

.d-header-icons a:hover {
background-color: #D93A00 !important;
color: white !important;
border-radius: 30px;
}

But I cant change search button, menu button and avatar side
How can i find like " .d-header-icons a:hover " for menu button search and avatar ?

5

I did if you need :slight_smile:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            border-radius: 4px;
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: #223237;
                .d-icon {
                    color: white;
                }
            }
        }
        &.active .icon .d-icon {
            color: white;
        }
    }
}