# כיצד ניתן לשנות את צבע אייקוני ה-Header באמצעות כפתור ההמבורגר?

**URL:** https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343
**Category:** Development
**Tags:** css
**Created:** [28 במרץ,‏ 2024,‏ 2:04pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343 "2024-03-28T14:04:12Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [28 במרץ,‏ 2024,‏ 2:04pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343/1 "2024-03-28T14:04:12Z")

</div>

Hi everyone,

> [@How to Change Header Icon Color?](https://meta.discourse.org/t/how-to-change-header-icon-color/106098):
>
> This is currently what our forum looks like… We are going to rebrand our color scheme. The header will be green with a white header logo. I am having trouble figuring out how to change the colors of the magnifying glass and the hamburger menu icon in the header. They are currently gray, which will look awful on top of a green header. The white icons will also match the new header logo. I’ve looked in the theme menu and I see an option called header primary, which says in the descrip…

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

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [28 במרץ,‏ 2024,‏ 2:21pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343/2 "2024-03-28T14:21:41Z")

</div>

changing header icon colors:

> [@How to Change Header Icon Color?](https://meta.discourse.org/t/how-to-change-header-icon-color/106098/21):
>
> For the header icons on the right side, in common-css of a theme or theme component: .d-header .d-header-icons .d-icon { color: \<header icons color\> !important; &:hover { color: \<header icons hover color\> !important; } } For the hamburger icon in side bar menu mode: .d-header .header-sidebar-toggle button .d-icon { color: \<hamburger icon color\> !important; &:hover { color: \<hamburger icon hover color\> !important; } } \<header icons color\>, \<hamburger …

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

> [@Rounded Borders for images, oneboxes, blockquotes & more](https://meta.discourse.org/t/rounded-borders-for-images-oneboxes-blockquotes-more/232044):
>
> Created a very simple component to change the borders of images, oneboxes, blockquotes and staff notices shown in topics. Allows change of the following settings set image rounding intensity set image border width set image border color set onebox rounding intensity change onebox border width change onebox border color change onebox background color set rounding blockquotes intensity remove left border from blockquotes set ‘staff color’ rounding intensity [topic thumbnail](https://meta.discourse.org/t/topic-list-thumbnails-theme-component/150602) support for: list ro…

---

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [28 במרץ,‏ 2024,‏ 2:40pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343/3 "2024-03-28T14:40:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [28 במרץ,‏ 2024,‏ 3:20pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343/4 "2024-03-28T15:20:19Z")

</div>

@Lilly I did ! 🙂

```plaintext
.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 ?

---

<div class="post-metadata">

### Author: ![ogulcan1787](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ogulcan1787/32/128589_2.png) [@ogulcan1787](https://meta.discourse.org/u/ogulcan1787)
#### Post date: [28 במרץ,‏ 2024,‏ 6:26pm UTC](https://meta.discourse.org/t/how-can-i-change-header-icons-color-with-hamburger-button/301343/5 "2024-03-28T18:26:34Z")

</div>

I did if you need 🙂

```plaintext
.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;
        }
    }
}

```