Add Special Characters to Phone Menu-Title

[hkp]

@Scrambler

Good day Sir!

Some time ago you helped me rename my Phone Menus on https://www.hiskingdomprophecy.com/ to Top = “Resources” and Bottom = “Articles”.

We use 2x standard Menus as follows:

Top Menu = Secondary Navigation and Bottom Menu = Primary Navigation.

These now render the Menu names on phones as Top = “Resources” and Bottom = “Articles”.

I now want to change to add a ‘Hamburger’ symbol to the titles. e.g. “≡ Articles” and “≡ Resources”.

I set Weaver options: All Menus : Mobile Menu “Hamburger” Label: “≡ Resources” and that works 100% for the top menu.

However, in the Bottom Primary Navigation I use:

‘.menu-primary .wvrx-menu-button:after {content:”Articles”;}’

and this renders: “Articles” correctly.

However, when I change to:

‘.menu-primary .wvrx-menu-button:after {content:”≡ Articles”;}’

WP changes that to:

‘.menu-primary .wvrx-menu-button:after {content:”& # 8801; Articles”;}’

And it renders the menu name as: “& # 8801; Articles”.

Is there any way I can insert the special character into the “.menu-primary .wvrx-menu-button:after {content:”≡ Articles”;}” to get the desired “≡ Articles” result?

(Note: additional spaces added to “& # 8801” to render correctly here in visual)

Regards and thanks,
Angus

[scrambler]

This reply has been accepted as the best answer.

Do the following.

In the theme  menu option  Mobile Menu “Hamburger” menu Label:  box put

<span style="vertical-align:inherit;margin-right:10px;" class="genericon genericon-menu">
</span><span class="mylabel" style="color:red;">Menu</span>

That will insert the hamburger and the label for the secondary menu, adding a class for the text so we can target the text

Then replace you current CSS

.menu-primary .wvrx-menu-button>span {display:none;}
.menu-primary .wvrx-menu-button:after {content:”Articles menu”;}

by the one below

.menu-primary .wvrx-menu-button .mylabel {display:none;}
.menu-primary .wvrx-menu-button:after {content:”Articles menu”;}

[hkp]

@Scrambler

Thank you so much!

It worked 100% as stated.

Regards and thank,

Angus

 

[scrambler]

To better align the hamburger an the text you can change the HTML from

<span style="vertical-align:inherit;margin-right:10px;" class="genericon genericon-menu">
</span><span class="mylabel" style="color:red;">Menu</span>

to

<span style="margin-bottom:6px;margin-right:10px;" class="genericon genericon-menu">
</span><span class="mylabel" style="color:red;">Menu</span>

[hkp]

@Scrambler

Again, thank you so much!

I now have a better idea how it works  🙂

That said, I have 5 browsers on my android phone and each one renders the menus differently!

Given the time to clear caches etc. it is very slow to make tiny changes, which may not even show on some browsers.  e.g. changing ‘margin-bottom:6px;’ to ‘margin-bottom:2px;’ makes noticeable changes on some browsers, but not other.

Actually, FYI, your suggestion to insert your code into “Hamburger” Menu Label Box breaks it on my phone admin browser – Firefox Light – but it does work elsewhere.  On admin, just reads “Articles” in small font, compared to the “≡ Resources” in large font above.  No worries though…. only I see it.

I have been testing to see if ‘.menu-secondary .wvrx-menu-button:after {font-size:xxx%;}’ will reduce the size of the top (secondary) menu font, but changes to child/style.css take ages to propagate, so I may abandon that testing.   The Hamburger icons all seem the same sizes, but the fonts are not, and I’d rather reduce the top menu, rather than enlarge the bottom one.

So yes, a change in the Menu Label Box is fast to propagate, but not the child/style.css and using two menus for a phone, is not to be recommended  🙂

Again thanks for your follow up and attention and interest.  Greatly appreciated.

Regards and a happy weekend,
Angus

[scrambler]

If you are having problems with using px for the margin, try using em (start with 1em) instead and see if that creates a more consistent space

Changing the font size of resources can be done with the rule below

.is-menu-mobile .wvrx-menu-button span {font-size:106%;}

If CSS changes take time to propagate, this is probably because you are using a cache plugin or service.

If so, You should be able to clear your cache when you make changes so they propagate immediately.
Some plugins also have options so that it doe that automatically when you make changes

[hkp]

@Scrambler

Thanks again for your help.

For the record my final settings are:

In Child/style.css

‘.menu-primary .wvrx-menu-button .mylabel {display:none;}
.menu-primary .wvrx-menu-button:after {content:”Articles”;}
.menu-primary .wvrx-menu-button:after {font-size:125%;}’

In Weaver options: All Menus : Mobile Menu Hamburger Label:

‘< span style=”margin-bottom:6px;margin-right:10px;” class=”genericon genericon-menu”> < / span>< span class=”mylabel” style=”color:white; font-size:13pt”>Resources</ span>’

Regards and thanks,
Angus

 

 

 

[scrambler]

I see you mention Child CSS.

just FYI, You do not need a child theme for Custom CSS. All Custom CSS can go in the Theme Global Custom CSS Rule box, and it is saved with all the other options to carry onto any updates like the options do.

[Author]

Posts