# Header 3 - hamburger menu icon colour

**URL:** <https://forum.pinegrow.com/t/header-3-hamburger-menu-icon-colour/971>\
**Category:** Blocks\
**Created:** [June 2, 2017, 12:46pm UTC](https://forum.pinegrow.com/t/header-3-hamburger-menu-icon-colour/971 "2017-06-02T12:46:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mullerice](https://avatars.discourse-cdn.com/v4/letter/m/3be4f8/32.png) [@mullerice](https://forum.pinegrow.com/u/mullerice)\
**Post date:** [June 2, 2017, 12:46pm UTC](https://forum.pinegrow.com/t/header-3-hamburger-menu-icon-colour/971/1 "2017-06-02T12:46:13Z")

</div>

Hi,

I’m not clear how to change the colour of the hamburger menu icon in the Bootstrap Blocks Header 3 block. As far as I can see it’s not a glyph, and I’ve looked and tried lots of different things to try to change it unsuccessfully.

Any help appreciated.

Cheers,

Adam

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [June 2, 2017, 12:55pm UTC](https://forum.pinegrow.com/t/header-3-hamburger-menu-icon-colour/971/2 "2017-06-02T12:55:08Z")

</div>

Have a look at this on stack overflow re [changing color of hamburger](https://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap) it might help

---

<div class="post-metadata">

**Author:** ![mullerice](https://avatars.discourse-cdn.com/v4/letter/m/3be4f8/32.png) [@mullerice](https://forum.pinegrow.com/u/mullerice)\
**Post date:** [June 2, 2017, 1:22pm UTC](https://forum.pinegrow.com/t/header-3-hamburger-menu-icon-colour/971/3 "2017-06-02T13:22:05Z")

</div>

Thanks for the prompt reply Rob. I tried using the selector mentioned in post (.navbar-default .navbar-toggle .icon-bar) but it ended up changing the background colour of the button - ie. it became not transparent.

I have managed to get it to work though - I found that changing the selector below following has had the desired effect:  
 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/1a866781bed2828c7e568e46dbd46ba8b8073b01.PNG)

- #header-3 #nav-toggle span, #header-3 #nav-toggle span:before, #header-3 #nav-toggle span:after

I’ve created custom css using this selector which I think was the right thing to do…?