Need to fix custom bottom icon size & text align .code given by team

I asked for change my mobile bottom mobile menu icon to another icon.
Support Team member helped me & Gave me below code.

1##Problem is ,this changed icon looks bigger than other icon & # Icon title text (Shop) alignment is not fix as other icon title, text moves in different screen size mobile.

NOTE/: Icon is marked in Screenshot.
& Code below.

.wd-toolbar.wd-toolbar-label-show .wd-header-mobile-nav .wd-tools-icon:before {
content: “\f130”!important;

}

.wd-header-mobile-nav.whb-wd-header-mobile-nav a .wd-toolbar-label {
visibility: hidden;
}

.wd-header-mobile-nav.whb-wd-header-mobile-nav a .wd-toolbar-label:before {
visibility: visible !important;
content: “Shop”;
margin-left: 1.4em;
 

}

Attachments:

You must be logged in to view attached files.

Another Screenshot

Attachments:

You must be logged in to view attached files.

[Aizaz Imtiaz Awan]

Hello,

Regarding the Icon size change here, you can add the font-size property to the icon changed CSS sent, something like:

Earlier the CSS in this regard is this:
.wd-header-mobile-nav .wd-tools-icon:before { content: “\f130” !important; }

Which you can change to this:

.wd-toolbar.wd-toolbar-label-show .wd-header-mobile-nav .wd-tools-icon:before {
    content: "\f130"!important;
    font-size: 19px;
}

Font Size 19px is the size of other icons appearing there.

Regarding the alignment concern in this regard for the Text, the thing is as default text of “Menu” is present there already we have just made its visibility hidden with the CSS so that text is covering up a space too and then the forcefully added “Shop” text is then adjusted accordingly to the space available here. So, this can be an issue with this change. You can try modifying the margin-left property in this regard, hopefully this might work out for you:

Earlier, the CSS in this regard is this:

.wd-header-mobile-nav.whb-wd-header-mobile-nav a .wd-toolbar-label:before {
    visibility: visible !important;
    content: "Search";
    margin-left: auto;
}

You can change the value of margin-left here to something increasing like 1.9em or 2em whichever best works out for you:

.wd-header-mobile-nav.whb-wd-header-mobile-nav a .wd-toolbar-label:before {
    visibility: visible !important;
    content: "Search";
    margin-left: auto;
}

If you are facing an issue specifically on Tablet views, then try applying the CSS under the Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for the tablet section:

Hope this helps !

Best Regards

• This reply was modified 2 years, 1 month ago by Aizaz Imtiaz Awan.

ok but if i use moreleft margin that
Hide Content text like (Search= Sea)
last 3 font hiden like this

Hello,

As we mentioned earlier, it is difficult to adjust the forcefully added Text here in terms of responsive view due to the fact that two Texts are added here. So, the CSS solution might completely not work out for you here.

Could you once try removing only the Custom CSS related to the Text changing for the moment and try changing the Text through a Translate plugin on your Site? Like Loco Translate: https://xtemos.com/docs-topic/translate-woodmart-theme-with-loco-translate/

Hope this might work out for you !

Best Regards

[Author]

Posts