Home › Forums › Weaver Xtreme Theme › Add Special Characters to Phone Menu-Title
- This topic has 7 replies, 2 voices, and was last updated 1 year, 3 months ago by
scrambler.
-
AuthorPosts
-
April 22, 2021 at 08:40 UTC - Views: 36 #68094
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,
AngusApril 22, 2021 at 16:33 UTC - Views: 36 #68097This 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”;}April 23, 2021 at 02:13 UTC - Views: 30 #68102hkp
ParticipantApril 23, 2021 at 04:04 UTC - Views: 35 #68103scrambler
ModeratorTo 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>
April 24, 2021 at 04:31 UTC - Views: 31 #68114hkp
ParticipantAgain, 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,
AngusApril 24, 2021 at 05:05 UTC - Views: 21 #68116scrambler
ModeratorIf 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 changesApril 26, 2021 at 06:15 UTC - Views: 24 #68131hkp
ParticipantThanks 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,
AngusApril 26, 2021 at 15:53 UTC - Views: 13 #68135scrambler
ModeratorI 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.
-
AuthorPosts
- You must be logged in to reply to this topic.