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

Is there a way I can do this specifically for the mobile version of the site? 

The desktop version has the nav pages on the right of the header and I like how that looks. But on the mobile version, it just shows the burger. I'd like it to say Case Studies as text on two rows of text. But without it impacting how the desktop version of the site looks. 

Thank you in advance and apologies for bumping an old thread. 

On 5/10/2023 at 6:29 PM, SteHamp said:

Is there a way I can do this specifically for the mobile version of the site? 

The desktop version has the nav pages on the right of the header and I like how that looks. But on the mobile version, it just shows the burger. I'd like it to say Case Studies as text on two rows of text. But without it impacting how the desktop version of the site looks. 

Thank you in advance and apologies for bumping an old thread. 

What is your site url?

19 hours ago, tuanphan said:

What is your site url?

www.eiecasestudies.com

PW: Experience2023

thank you

On 5/12/2023 at 4:27 PM, SteHamp said:

www.eiecasestudies.com

PW: Experience2023

 

thank you

The url doesn't work. Can you check it again?

On 5/14/2023 at 5:29 AM, tuanphan said:

The url doesn't work. Can you check it again?

It's definitely www.eiecasestudies.com Oddly enough when you click that link in the previous post it opens a new tab as "eiecasetudies". How odd. 

Add to Design > Custom CSS

@media screen and (max-width:991px) {
.header-display-desktop {
    display: flex !important;
}
.header-display-mobile {
    display: none;
}
.header-burger {
    display: none;
}
.header-nav {
    display: flex !important;
}
.header-nav {
    display: flex !important;
    flex: 70% !important;
    justify-content: flex-end;
}
.header-title-nav-wrapper {
    flex-direction: column;
}
.header-nav {
    padding: 0 !important;
    text-align: center !important;
}
nav.header-nav-list {
    justify-content: center !important;
}
}

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

This worked great for me, but what I REALLY want is for MENU to be a button. I want this on desktop and mobile. Click the button, get the mobile menu with nav bar, on both mobile and desktop.

sallylynne.com

On 2/13/2024 at 4:15 AM, Insigneia4 said:

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

This worked great for me, but what I REALLY want is for MENU to be a button. I want this on desktop and mobile. Click the button, get the mobile menu with nav bar, on both mobile and desktop.

sallylynne.com

Add this CSS under

.burger-inner:after {
    background-color: #fff;
    color: #000;
    padding: 5px 10px;
    border-radius: 10px;
}