Jump to content

Replace Hamburger Menu Icon With Text

Recommended Posts

2 hours ago, orneverornow said:

Site URL: https://www.voegelino.com/

Hi there

I would like to change the hamburger menu icon into the text MENU. Any idea? I have a quite complicated set up with this menu and don't want to destroy anyting. Could anyone please help me? 

https://www.voegelino.com/
PW: orneverornow

Attached you can find the custom code that is in the CSS.

Thanks!
Sibylle

Bildschirmfoto 2022-03-02 um 11.44.48.png

Do you mean something like this?

image.thumb.png.68332c4aca63d0af5c924289199dc579.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, orneverornow said:

@bangank36 Could you please help me with it? 🙏 

Try adding to Home > Design > Custom Css

.header-nav-folder-title[href*="burger"]:after{
  content: 'Menu';
}

.header-nav-folder-title[href*="burger"] svg {
  display: none;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 hours ago, bangank36 said:

Try adding to Home > Design > Custom Css

.header-nav-folder-title[href*="burger"]:after{
  content: 'Menu';
}

.header-nav-folder-title[href*="burger"] svg {
  display: none;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Hi @bangank36. Thank you so much. It worked like a charm. How can I make it in capital letters and a little bit bigger?

Thx!!!

Link to comment
4 hours ago, orneverornow said:

Hi @bangank36. Thank you so much. It worked like a charm. How can I make it in capital letters and a little bit bigger?

Thx!!!

You can add the style of font-size for this pseudo element, from:

.header-nav-folder-title[href*="burger"]:after{
  content: 'Menu';
}

to

.header-nav-folder-title[href*="burger"]:after{
  content: 'Menu';
  font-size: 25px;
}

Change the size value until it meets your requirement

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 7 months later...
On 10/9/2022 at 6:17 AM, ozk said:

is the code different for my website? ebtacademy.squarespace.com 

 

cant get it to work

Add to Design > Custom CSS

/* Burger icon to text */
.burger-inner>div {
    visibility: hidden;
}
.burger-inner:after {
    visibility: visible;
    content: "Menu";
    font-size: 20px;
    color: white;
    white-space: nowrap;
    position: relative;
    left: -10px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.