Replace the "fa bars" menu button (displayed as ☰) with the word "Menu" in the Michael David Design "Traveler" theme

Classic Themes
1

I know there are similar questions/answers in the forum to this “fa bars problem” for other themes. But I can’t seem to make any of the answers work in the specific theme I’m using: Michael David Design’s “Traveler” theme. Any help would be much appriciated.

For your info, the “fa bars” button (also known as a “hamburger” button) is a button in a graphical user interface (like a website page) carrying an icon consisting of three parallel horizontal lines (displayed as ☰). It’s actually a button that will open a menu list, thus replacing it with the actual word “menu” makes sense. I just have to figure out how to do that.

Note: the “fa bars/hamburger” button, as of this writing, is used on this forum page at the top right hand corner.

2

A URL would help someone give you help.

3

Doug
Thanks for your interest. Fortunately the nice folks at Michael David Design just helped me out with the coding answer:

CSS:
#lt, #lm, #lb, .lt, .lm, .lb {display:none; }
#mwrap span { font-family: ‘Helvetica’; font-size:18pt; color:white;}

Javascript:
jQuery(function(){
jQuery("#mwrap").append(“menu”);
});

If anyone is interested, here’s a link to the Traveler theme. My final design has a color in the menu bar background where the “fa bars” button resides, which is the reason for the white type in the code.

‎michaeldaviddesign.com/themes/traveler/

1 Like
4

Revised post - this might help some folks:

If anyone is interested, I started playing around with the values/coding a little. To the CSS coding, I added font-weight (you can use: 100, 200, 300, etc. all the way up to 900, 100 being the lightest and 900 the boldest) and letter-spacing (you can use: 1px, 2px, 3px, etc., the higher the number the more open the letter spacing) to the mix.

Now I have a nice easy-to-understand button shown as the word “menu” replacing the sometimes confusing “fa bars”. Folks are still occasionally confused what those bars are. So I wanted to make it easier for them.

Also keep in mind, you must use both the CSS & JavaScript coding as shown here, placed in their respective sections of the HTML tab, for this to work in the Traveler theme. It might be close to the coding you would use in other themes, but I’m sure there will be some changes depending on the theme. So I really don’t know about that 100%. I’m a designer/art director, not a coder. But this will give you an idea of what you can do. Hope it helps a little.

CSS:
#lt, #lm, #lb, .lt, .lm, .lb {display:none; }
#mwrap span { font-family: ‘helvetica’; font-weight: 400; letter-spacing: 1px; font-size:18pt; color:white; }

JavaScript:
jQuery(function(){
jQuery("#mwrap").append(“menu”);
});

The nice part of this theme is the menu that dramatically opens in a long verticle panel in the center of the page. There are many variations/customizable options to this theme that you can view by going to the different page links in the menu button. I’ve used this theme for a few websites already:

michaeldaviddesign.com/themes/traveler/

5

One last thought on all this and then I’ll shut up and move one. I mentioned, in error on thinking about it, that you should put both the CSS and JavaScript code in the corresponding sections of the HTML tab of Rapidweaver. Well, that will work. But it will only work for that one page. If you went this route, you’d have to do the same thing for every page of your site.

The easier solution, and the correct one, considering that you want the menu bar to work the same way for the entire site, is to simply insert the code in the universal code section of Rapidweaver. To do this, just click the “gear” icon at the left/top of any page (RW version 6), insert the CSS and JavaScript in the sections marked as such, and bingo, you’re finished. And you only have to do this once and it works for all the pages of your site. A big time saver for sure. No need to put the code in the HTML tab of each page. If fact, you don’t want to do that because you’ll mess things up by duplicating the code.

So… that’s it folks, I can’t think of anything else to say about all this. Except that YOU CAN CHANGE THE FA ICON TO THE WORD MENU using css code… on ANY theme! Hope it helps.

1 Like