peterliang Posted August 15, 2019 Share Posted August 15, 2019 (edited) Any advice on how to change the line weight of the hamburger menu icon to hairline? I recently used this custom code to convert the "MENU" text for the mobile navigation in the Flatiron template, but not loving the thickness of the lines. My site: https://www.bluetruckstudio.com/work Edited August 15, 2019 by peterliang Initial Revision Link to comment
Solution insidethesquare Posted August 15, 2019 Solution Share Posted August 15, 2019 Hey @peterliang ! So I have sad news - it looks like that hamburger menu is actually a character, so we cant change the thickness of the lines using CSS :( You can use any other Unicode character, so if there is another one in that character map that is a thinner version you can switch it up! But right now it is set to display character "/e030" and CSS cant change the line weight. I hope that makes sense! Link to comment
peterliang Posted August 16, 2019 Author Share Posted August 16, 2019 @insidethesquare, thank you for that explanation! I'm not familiar with Unicode characters, but did a quick web search. Would that character be modified (color, line weight) by the font that is set for that portion of my site? If I were to find another character I liked better, how/where would I change that? Link to comment
eugenesoch Posted September 29, 2020 Share Posted September 29, 2020 That is very interesting, as we have just updated our burger menu to a preferred thickness. Of course, our website is running on Squarespace 7.1, so in case you are on the same, try using this css: /*burger menu thickness*/ .top-bun, .patty, .bottom-bun { height: 3px !important; } /*end burgre menu thickness*/ p.s. you can adjust the thickness to your liking by changing value next to px (currently set to 3px) hope this helps! brunodiazcast, Hellevang, deets87 and 3 others 1 4 1 Link to comment
lgwebdesign Posted February 7, 2021 Share Posted February 7, 2021 On 9/29/2020 at 5:49 PM, eugenesoch said: That is very interesting, as we have just updated our burger menu to a preferred thickness. Of course, our website is running on Squarespace 7.1, so in case you are on the same, try using this css: /*burger menu thickness*/ .top-bun, .patty, .bottom-bun { height: 3px !important; } /*end burgre menu thickness*/ p.s. you can adjust the thickness to your liking by changing value next to px (currently set to 3px) hope this helps! This worked perfectly. Thanks. Link to comment
HandegardArkitektur Posted May 19, 2022 Share Posted May 19, 2022 On 9/29/2020 at 6:49 PM, eugenesoch said: That is very interesting, as we have just updated our burger menu to a preferred thickness. Of course, our website is running on Squarespace 7.1, so in case you are on the same, try using this css: /*burger menu thickness*/ .top-bun, .patty, .bottom-bun { height: 3px !important; } /*end burgre menu thickness*/ p.s. you can adjust the thickness to your liking by changing value next to px (currently set to 3px) hope this helps! That worked like a charm, but only in mobile version. Or is it me? Thanks, legend! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment