Foundation 6 > title-bar & menu-icon customization

2
votes

I'm new to Foundation, and I started using Foundation 6, don't know anything about the older versions.

I have a responsive top-bar that becomes a title-bar when the screen is small.

If you are familiar with Foundation, you know that the title-bar has a menu-icon by default, that allows you to toggle the content from your top-bar when you click it, and also toggle it back when you click again.

Well my problem is simple. I don't know how to change the color of the menu-icon, I've seen tutorials to change it on Foundation 5, but it did not work for me on F6.

I'd also like to know how change the position of the menu-icon inside the title-bar. Even change it's functionality or the way it toggles your top-bar content as I have seen it in some websites.

Any extra help and additional tips will be very well appreciated, as I'd like to learn as much as possible about F6. (:

Thank you.

2
htmlcsszurb-foundation

2 Answers

8
votes

Foundation 6 menu "hamburger" icon consists of

  • one 2px high block (upper line);
  • two shadows of that block at 7px and 14px down in vertical direction (middle and bottom lines).

So, to change menu icon color use the following CSS:

.menu-icon::after {
    /* the block itself, the first line */
    background: #fecf0f;
    /* middle and bottom */
    box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
    /* respect WebKit */
    -webkit-box-shadow: 0 7px 0 #fecf0f, 0 14px 0 #fecf0f;
}

where #fecf0f is the color you want to change.

0
votes

You need to change the color of pseudo elements ::after of class menu-icon, there you can play with positions and styles, so you can do this for example:

.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    bbackground: red;
    background-size: 150%;
    background-position: 7px 11px;
    background-repeat: no-repeat;
}