jaimee1570048593 Posted December 10, 2019 Share Posted December 10, 2019 Hello! I'm using the Moksha template and have tried all of the CSS I can find with no change whatsoever. Has anyone changed the hamburger menu in this template.... on the left hand side to words or even just add the word MENU? Help please! Signed: Why can't my client just deal with the hamburger menu??? Link to comment
tuanphan Posted December 10, 2019 Share Posted December 10, 2019 Change to word "Menu" button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-family: proxima-nova; color: #000; font-size: 20px; } Add word "Menu" beside icon button.Mobile-bar-menu:before { content: "Menu"; font-size: 20px; color: #000; position: absolute; right: 50px; top: 25px; } All code from here: https://beaverhero.com/moksha-squarespace/#Add_word_Menu_beside_Hamburger_Icon @jaimee1570048593 dhob and jaimee1570048593 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jaimee1570048593 Posted December 10, 2019 Author Share Posted December 10, 2019 24 minutes ago, tuanphan said: Change to word "Menu" button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-family: proxima-nova; color: #000; font-size: 20px; } Add word "Menu" beside icon button.Mobile-bar-menu:before { content: "Menu"; font-size: 20px; color: #000; position: absolute; right: 50px; top: 25px; } All code from here: https://beaverhero.com/moksha-squarespace/#Add_word_Menu_beside_Hamburger_Icon @jaimee1570048593 You are the best!!! Thank you thank you thank you : ) tuanphan 1 Link to comment
DanFarmer Posted December 16, 2019 Share Posted December 16, 2019 Hi @tuanphan and @jaimee1570048593 - did you add this code into the Custom CSS area? or did you add this into the Advanced Code Injection area? Link to comment
tuanphan Posted December 16, 2019 Share Posted December 16, 2019 36 minutes ago, DanFarmer said: Hi @tuanphan and @jaimee1570048593 - did you add this code into the Custom CSS area? or did you add this into the Advanced Code Injection area? Add to Home > Design > Custom CSS DanFarmer 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted June 10, 2021 Share Posted June 10, 2021 On 6/9/2021 at 2:53 AM, oakandmelanin said: this didnt work for me 😕 Each template needs a different code. Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 20, 2021 Share Posted July 20, 2021 (edited) On 12/10/2019 at 11:51 AM, tuanphan said: button.Mobile-bar-menu { visibility: hidden; } button.Mobile-bar-menu:after { visibility: visible; content: "Menu"; font-family: proxima-nova; color: #000; font-size: 20px; } @tuanphanThis works great. I'm curious if this could be manipulated to have the index page "MENU" font color as white and then black for all other pages? Edited July 20, 2021 by SouthernSunEvents Link to comment
tuanphan Posted July 20, 2021 Share Posted July 20, 2021 2 hours ago, SouthernSunEvents said: @tuanphanThis works great. I'm curious if this could be manipulated to have the index page "MENU" font color as white and then black for all other pages? Can you share your site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 20, 2021 Share Posted July 20, 2021 (edited) 20 hours ago, tuanphan said: Can you share your site url? Gah, sorry! Also curious how to get my nav bar to stick at the top for mobile/tablet. I'm tried so many different variations of code but nothing seems to be working. http://www.southernsunevents.com PW: sse2020 Edited July 21, 2021 by SouthernSunEvents Link to comment
tuanphan Posted July 22, 2021 Share Posted July 22, 2021 On 7/21/2021 at 6:47 AM, SouthernSunEvents said: Gah, sorry! Also curious how to get my nav bar to stick at the top for mobile/tablet. I'm tried so many different variations of code but nothing seems to be working. http://www.southernsunevents.com PW: sse2020 It looks like you solved menu icon to word menu + sticky mobile header? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SouthernSunEvents Posted July 22, 2021 Share Posted July 22, 2021 2 minutes ago, tuanphan said: It looks like you solved menu icon to word menu + sticky mobile header? Still trying to change "MENU" color to white on index page and can't seem to get sticky nav. It's still scrolling down for me on mobile and tablet. Thanks! Link to comment
tuanphan Posted July 22, 2021 Share Posted July 22, 2021 Add to Design > Custom CSS body.homepage button.Mobile-bar-menu:after { color: white; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
AncoatsJohn Posted January 13, 2022 Share Posted January 13, 2022 On 6/10/2021 at 1:31 AM, tuanphan said: Each template needs a different code. Can you share link to your site? Hey Tuanphan, I'm just trying to find if there is a way I can either switch the hamburger to something clearly a menu (for folks who don't recognise the hamburger icon), or add menu next to it as suggested by the original poster. My accountant phoned me today because he thought my website was only one page! he never found the menu. So, in case there are others like him, I need to improve this! I am using the FULTON template. Mt site is www.theancoatsbagcompany.com Is there any chance you could advise how two modify the code, or help me know where to ask? Thanks. Link to comment
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 On 1/14/2022 at 4:32 AM, AncoatsJohn said: Hey Tuanphan, I'm just trying to find if there is a way I can either switch the hamburger to something clearly a menu (for folks who don't recognise the hamburger icon), or add menu next to it as suggested by the original poster. My accountant phoned me today because he thought my website was only one page! he never found the menu. So, in case there are others like him, I need to improve this! I am using the FULTON template. Mt site is www.theancoatsbagcompany.com Is there any chance you could advise how two modify the code, or help me know where to ask? Thanks. Add to Design > Custom CSS /* Add menu text */ .mobile-nav-toggle-label:before { content: "Menu"; position: relative; right: -25px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Seanth Posted February 23, 2022 Share Posted February 23, 2022 Hi @tuanphan I've tried all the codes above and none works for me. I understand that the code varies depending on the current design of the page. Could you please help? Since I forced burger menu in desktop mode, I need to have ""MENU" next to the Burger icon so badly. Here's my site URL https://www.tma-mdpartner.com Thank you. Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 On 2/23/2022 at 7:39 PM, Seanth said: Hi @tuanphan I've tried all the codes above and none works for me. I understand that the code varies depending on the current design of the page. Could you please help? Since I forced burger menu in desktop mode, I need to have ""MENU" next to the Burger icon so badly. Here's my site URL https://www.tma-mdpartner.com Thank you. Add this CSS .burger-inner:before { content: "Menu"; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); } ec25 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Seanth Posted March 1, 2022 Share Posted March 1, 2022 On 2/27/2022 at 11:11 AM, tuanphan said: Add this CSS .burger-inner:before { content: "Menu"; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); } Thank you so much! You saved me!! Link to comment
KoriLinae Posted July 8, 2022 Share Posted July 8, 2022 (edited) On 2/26/2022 at 8:11 PM, tuanphan said: Add this CSS .burger-inner:before { content: "Menu"; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); } Hi Tuanphan, I've been working on this in the Bedford template and I cannot get the CSS code I am using to change the hamburger icon to the word "menu". I did notice in the site styles, that there is no mobile options anywhere. Do I need to put the code in the Advanced section in the Code Injection area? I have done it on other sites I have built, but this one... grrr! lol Here is the URL: www.imaginaryroadstudios.com Thank you kindly, Kori Edited July 8, 2022 by KoriLinae There be no techory around here my friend... Link to comment
tuanphan Posted July 9, 2022 Share Posted July 9, 2022 7 hours ago, KoriLinae said: Hi Tuanphan, I've been working on this in the Bedford template and I cannot get the CSS code I am using to change the hamburger icon to the word "menu". I did notice in the site styles, that there is no mobile options anywhere. Do I need to put the code in the Advanced section in the Code Injection area? I have done it on other sites I have built, but this one... grrr! lol Here is the URL: www.imaginaryroadstudios.com Thank you kindly, Kori Use this code .mobile-nav-toggle { visibility: hidden; } .mobile-nav-toggle:before { visibility: visible; content: "Menu"; position: relative; left: -20px; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
linashamoon Posted December 12, 2023 Share Posted December 12, 2023 I just tried to do this and this worked for me: .burger-box { visibility: hidden; } .burger-box:after { visibility: visible; content: "Menu"; font-family: Tahoma; color: #FFF; font-size: 20px; } Link to comment
Dandeboy Posted December 23, 2023 Share Posted December 23, 2023 Please I am having the same issue, My site URL is www.cefaanfarms.com.ng Please tell me which CSS code will do this for me. I have tried and added other CSS codes above Link to comment
tuanphan Posted December 25, 2023 Share Posted December 25, 2023 @Dandeboy Use this CSS code button.wp-block-navigation__responsive-container-open:before { content: "Menu"; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Jaymz Posted March 21 Share Posted March 21 I'm trying to work out how to solve this issue. Does anyone know how? Thanks in advance Buttons do not have an accessible name div.header-inner > div.header-display-mobile > div.header-burger > button.header-burger-btn <button class="header-burger-btn burger" data-test="header-burger"> Link to comment
twigsplace Posted March 21 Share Posted March 21 Hi, does anyone have the correct code to do this on the Mint template (Marquee family). I want to be able to add the word 'menu' next to the hamburger on my site www.twigsbranchphotography.com Many thanks! 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