Replace pancake menu icon/symbol

[DaRixter]

When I resize my display to a smaller size (e.g. tablet screen) the navigation menu is compressed into an icon I can only describe as a pancake (3 horizontal bars).  When I resize a site using the twentysixteen theme, the compressed navigation is replaced with the word “Menu” in a box.  I prefer the word “menu” instead of the stacked bars. How can I change this? Is it simply an img.jpg file to replace?  Where?  What?  I’m using a child theme, so Weaver Theme updates won’t undo my changes. 

[scrambler]

Please provide a link to your site so we can be sure of what theme you are using.

For Xtreme, you can read the item #6 of the thread below
http://forum.weavertheme.com/discussion/10739/weaver-xtreme-tips-and-tutorials-part-4

[DaRixter]

Thank you:  Closer! Getting better…
________
Text Example = http://Jaggers.net
Bars Example = http://abctampabay.biz/ and http://BayshoreTownomes.com
====
I found the code in tutorial Item #6, but took a while to figure out where to put it.  The tutorial says “If you prefer text to the 3 bars icon for the Mobile menu, put the rules below in Main Options > Custom > Custom CSS Rule box”

The closest I could find in my abctampabay.biz dashboard is: Appearance > Customize > {} Custom CSS > ???
The path … > {} Custom CSS > {} Global Custom CSS box didn’t work

====
I tried this path … > {} Custom CSS > {} Menus > Custom for All Menus and found that it did remove the bars, but the font the word “Menu” is too small and is not bold. (Now: http://abctampabay.biz)

Can you suggest where I find how to correct my new problem?

I suspect I can change the code from
“.genericon-wvrx-menu::before {content:”Menu”;font-size:70%;}” to
“.genericon-wvrx-menu::before {content:”Menu”;font-size:100%;}”

But… I don’t know if this will have a ripple effect somewhere else and I’m not sure the syntax to change the font-weight.

[scrambler]

All the tutorial refer to the legacy Admin interface, NOT the customizer.
The place for Custom CSS in the Legacy Admin Interface is Appearance > Weaver Xtreme Admin > MAin options > FOnts & Custom > Custom CSS Rule box.
You do need to make sure you have the Weaver Xtreme Theme Support plugin installed as many options come with it, including the legacy admin interface.

In the Customizer this does correspond to Custom CSS > Global Custom CSS.

If the rule do not work, we need you to leave them in there and post back so we can see why they are not working.

But right now the rules are working. If you want a bigger text and bold, modify the rules accordingly (see below). If you need to find out CSS for other property, you can look them up on any CSS reference site.

.genericon-wvrx-menu::before {content:”Menu”;font-size:120%;font-weight:bold;}
.menu-toggle-button {width:3.5em;}

[DaRixter]

Wow!  Thank you for the code and the explicit directions about where to post it. You’ve answered my original question.

BONUS (for me): How can I put a box around the word “menu”?  Collapse a twenty-sixteen theme (http://Jaggers.net) for an example – When I examine the html code I see<Button></Button> tags.

[scrambler]

Change the rules to
.genericon-wvrx-menu::before {content:”Menu”;font-size:120%;font-weight:bold;border:1px solid black;}
.menu-toggle-button {width:4em;padding:0 5px 5px 5px;}

[DaRixter]

Final Notes:
1. Really impressed with speed and quality of replies
2. Received an answer to my original question…
3. Received an answer to my Bonus question  (Bonus was for me)…
4. Learned I could check the “check here/answer” link and still add an additional comment to the thread (this one)
~~~ Thank you!! ~~~

[scrambler]

Regarding 4, it is actually better to wait for your issue to be solved to accept an answer, and open a new thread for new problem, this reduces the chances that your new issue would be overlooked

[DaRixter]

Regarding 4, I understand a different problem should be handled with a different thread.  In this case I just wanted to add “Final Notes” reporting how this thread helped me, and to add a big “Thank you!!” at the end. Superfluous and unnecessary, I know, but it’s my way of tidying up the conversation.

[Author]

Posts