How to replace hamburger with word menu?

  • I want to either remove the hamburger icon and replace it with the word menu, or just add the word menu to the right. (Want to see it both ways before deciding.

    I’ve been playing with this in CSS to add the word hamburger to the right:

    button.secondary-toggle {
    width: 120px;
    height: 60px;
    vertical-align: top;
    border-color:red;
    }

    button.secondary-toggle:after {
    content: “MENUU”;
    float: right;
    /* margin: -16px 0 0 0; */
    }

    I can tell I’m in the right area because of the red border. I’m in over my head on this and would appreciate any suggestions.

    Also, I do have a child theme and have already violated the sanctity of header.php. If there’s a way to do it in header.php I’m open to that. Would that be a better cross-browser solution?

    Thanks!

    Mike

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter miketurco

    (@miketurco)

    This works well in chrome and ff but not edge or IE 10. As you narrow the window in the microsoft browswers, you see the text gets cut-off at some widths.

    Also, I think, it really doesn’t look good. If anyone has any suggestions on how to spice this up, or improve the cross browser thing, I’d really appreciate it. Demo: https://miketurco.com/test/ Thanks.

    .secondary-toggle::before {
    content: “MENU”;
    font-size: 1.1em;
    font-weight: bold;
    }

    .secondary-toggle {width:60px; border:solid black 1px;}

    did you try the same code with only one colon to see if it would work in ie?

    .secondary-toggle:before {
    content: "MENU";
    font-size: 1.1em;
    font-weight: bold;
}
    Thread Starter miketurco

    (@miketurco)

    I did try that just now, thank you for the suggestion! Unfortunately it didn’t work.

    I’m not sure there’s a difference between one colon and two. Maybe there is for IE?

    You would think that after all these years, ms would come up with a reliable, fully working browser just like all their competitors. </rant>

    maybe ie doesnt even supports pseudo elements…I hate ie. every version. with a passion.

    Thread Starter miketurco

    (@miketurco)

    I think this is as close as I’m going to be able to get. I widened the margin a little and centered the text. It works better than it did before (not perfect) in IE 9/10/11. Doesn’t work in 8 and I didn’t test in 7. Am still open to suggestions, both in terms of function and look. Test site: https://miketurco.com/test/

    Here’s the CSS for anyone trying to accomplish the same:

    /* change hamburger to word “menu” */

    .secondary-toggle {width:70px; border:solid black 1px; text-align: center; }

    .secondary-toggle:before {
    content: “MENU”;
    font-size: 1.1em;
    font-weight: bold;
    }
    /* END change hamburger to word “menu” */

    I checked your site and like the way the Menu box looks. I’m going to give this a try. Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to replace hamburger with word menu?’ is closed to new replies.