Replace Hamburger Menu Icon With Text

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

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

Do you mean something like this?

1 hour ago, bangank36 said:

Do you mean something like this?

Yes exactly and at hover underlined. Thank you!

2 hours ago, orneverornow said:

Yes exactly and at hover underlined. Thank you!

@bangank36 Could you please help me with it? 🙏 

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

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!!!

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

1 hour ago, bangank36 said:

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

Perfect. Thank you so so much @bangank36!

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

cant get it to work

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;
}