How can I add titles to my mobile menu drawer?

[loolakoola]

→

as screenshot I attached, my current mobile menu drawer is like left one, and I want to put each menu’s title like right one. please somebody help me how can I solve this problem?

[zaczee]

Hi @loolakoola ,

As we check we couldn’t find menu in your website

[Dan-From-Ryviu]

Hi @loolakoola ,

Please add this CSS code to add title

@media screen and (max-width: 749px) {
ul.menu-drawer__menu::before {
content: "SHOP";
}
ul.second-menu::before {
content: "BRAND";
}
ul.customer-service::before {
content: "CUSTOMER";
}
ul.menu-drawer__menu::before,
ul.second-menu::before,
ul.customer-service::before { font-size: 1.8rem; }
}

[loolakoola]

thank you so much. It works perfect.

[loolakoola]

Your code works properly , but unfortunately, I can see the title again above sub-menu. Can you fix it please?

[Dan-From-Ryviu]

Hi @loolakoola , please update code to this one

@media screen and (max-width: 749px) {
.menu-drawer__navigation > ul.menu-drawer__menu::before {
content: "SHOP";
}
ul.second-menu::before {
content: "BRAND";
}
ul.customer-service::before {
content: "CUSTOMER";
}
ul.menu-drawer__menu::before,
ul.second-menu::before,
ul.customer-service::before { font-size: 1.8rem; }
}

[loolakoola]

perfect! Thank you so much. I appreciate to your edit

[loolakoola]

I edit you code so it works like this

@media screen and (max-width: 780px) {
.menu-drawer__navigation > ul.menu-drawer__menu::before {
content: “SHOP”;
}
ul.second-menu::before {
content: “BRAND”;
}
ul.customer-service::before {
content: “CUSTOMER”;
}
ul.menu-drawer__menu::before,
ul.second-menu::before,
ul.customer-service::before {
font-size: 2.5rem;
font-weight: bold;
margin-left: 0px;
color: #000000;}
}

But I set their( bold SHOP BRAND CUSTOMER) margin-left same but seem different as you can see in screenshot. Can you tell me how to organize them please?

[Dan-From-Ryviu]

You can add more this CSS code to make your menu look better

@media screen and (max-width: 780px) {
ul.customer-service:before,
ul.second-menu:before {
   margin-left: -10px !important;
}
.second-menu,
.customer-service {
   padding-left: 30px !important;  
}
}