Jump to content

Wells mobile menu

Recommended Posts

  • Replies 3
  • Views 358
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I made a clearer idea of what I desire.

First - I want to add a burger view like in this wells template website:image.thumb.png.365fbb662494307e1faa674657b321bf.png

Second - I would like to change the color to my desired color - as in this wells template website:

image.thumb.png.52277e2f4c64925a07cdbc003f828e14.png

Third - I would like to format my menu so the 'folder' category and text is more legible:

from this:

 image.thumb.png.164b249cf45f716638753dbcbf4a6675.png

to this:

image.png.8c9691bc86ec05fc0b9a82549aacdf3e.png

 

Thank you so much !!

 

Link to comment
On 4/24/2022 at 3:40 PM, aaaallleeexx said:

I made a clearer idea of what I desire.

First - I want to add a burger view like in this wells template website:image.thumb.png.365fbb662494307e1faa674657b321bf.png

Second - I would like to change the color to my desired color - as in this wells template website:

image.thumb.png.52277e2f4c64925a07cdbc003f828e14.png

Third - I would like to format my menu so the 'folder' category and text is more legible:

from this:

 image.thumb.png.164b249cf45f716638753dbcbf4a6675.png

to this:

image.png.8c9691bc86ec05fc0b9a82549aacdf3e.png

 

Thank you so much !!

 

I found the burger menu code:

 

/* Menu text to burger */
#mobileMenuLink ul>li.active-link {
    visibility: hidden;
}
#mobileMenuLink ul>li.active-link a:before {
    visibility: visible;
    content: "";
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxOHYxaC0yNHYtMWgyNHptMC02djFoLTI0di0xaDI0em0wLTZ2MWgtMjR2LTFoMjR6IiBmaWxsPSIjMTA0MGUyIi8+PHBhdGggZD0iTTI0IDE5aC0yNHYtMWgyNHYxem0wLTZoLTI0di0xaDI0djF6bTAtNmgtMjR2LTFoMjR2MXoiLz48L3N2Zz4=);
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 5px !important;
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    margin-top: 5px;
}
/* Burger to X icon */
.menu-open + div #mobileMenuLink ul>li.active-link a:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuOTU0IDIxLjAzbC05LjE4NC05LjA5NSA5LjA5Mi05LjE3NC0yLjgzMi0yLjgwNy05LjA5IDkuMTc5LTkuMTc2LTkuMDg4LTIuODEgMi44MSA5LjE4NiA5LjEwNS05LjA5NSA5LjE4NCAyLjgxIDIuODEgOS4xMTItOS4xOTIgOS4xOCA5LjF6Ii8+PC9zdmc+) !important;
    filter: invert(1);
}

 

Does anyone know how to format the menu similar to this?

image.png.8c9691bc86ec05fc0b9a82549aacdf3e.png

or how to format the text of the wells mobile menu in anyway?!

 

Thanks!!

Link to comment
On 4/26/2022 at 3:48 AM, aaaallleeexx said:

 

I found the burger menu code:

 

/* Menu text to burger */
#mobileMenuLink ul>li.active-link {
    visibility: hidden;
}
#mobileMenuLink ul>li.active-link a:before {
    visibility: visible;
    content: "";
   background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yNCAxOHYxaC0yNHYtMWgyNHptMC02djFoLTI0di0xaDI0em0wLTZ2MWgtMjR2LTFoMjR6IiBmaWxsPSIjMTA0MGUyIi8+PHBhdGggZD0iTTI0IDE5aC0yNHYtMWgyNHYxem0wLTZoLTI0di0xaDI0djF6bTAtNmgtMjR2LTFoMjR2MXoiLz48L3N2Zz4=);
    width: 30px;
    height: 30px;
    display: block;
    margin-right: 5px !important;
    background-position: right center;
    background-repeat: no-repeat;
    float: right;
    margin-top: 5px;
}
/* Burger to X icon */
.menu-open + div #mobileMenuLink ul>li.active-link a:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjMuOTU0IDIxLjAzbC05LjE4NC05LjA5NSA5LjA5Mi05LjE3NC0yLjgzMi0yLjgwNy05LjA5IDkuMTc5LTkuMTc2LTkuMDg4LTIuODEgMi44MSA5LjE4NiA5LjEwNS05LjA5NSA5LjE4NCAyLjgxIDIuODEgOS4xMTItOS4xOTIgOS4xOCA5LjF6Ii8+PC9zdmc+) !important;
    filter: invert(1);
}

 

Does anyone know how to format the menu similar to this?

image.png.8c9691bc86ec05fc0b9a82549aacdf3e.png

or how to format the text of the wells mobile menu in anyway?!

 

Thanks!!

You mean remove line between items?

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

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.