Wells mobile menu

Site URL: http://www.alexcomansn.com

Hello!

I'm trying to make the menu on mobile a bit more visible. Right now from my analytics i see people remain on my home page only.

Therefore -  01: is there a way to make the mobile menu always on? 

02: is there a way to modify the menu to make it more legible. Bold the folder name / remove those lines?

Thank you! 

I made a clearer idea of what I desire.

First - I want to add a burger view like in this wells template website:

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

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

from this:

to this:

Thank you so much !!

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:

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

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

from this:

 

to this:

 

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?

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

Thanks!!

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?

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

 

Thanks!!

You mean remove line between items?