Replacing fa bars with text - Tesla Pro

RapidWeaver Classic Themes
1

Hi, thanks for reading.

Not new to RapidWeaver but just recently returned to the fold and am very excited by all the development and advancements!

So, I’ve created a site using the Tesla Pro theme, it’s not a mind-blowing effort but relevant to the intended audience, you’ll understand if you visit and take in the subject matter: http://dev.lot-markers.com

My one remaining design challenge is replacing the FontAwesome fa bars navigation icon (navicon, hamburger icon, I guess it goes by different descriptions) that appear in the mobile (iPhone) view with text that reads “MENU”.

I understand this is the default icon depicting a collapsed menu on smaller mobile devices but it’s just not intuitive for the people who visit this site using their phones.

I’ve searched through the CSS and JS files and can’t find a reference to fa bars or it’s unicode value of f0c9.

This is the last thing I need to address before I can go live with the site.

Again, thanks for reading and I appreciate any assistance anyone may offer.

2

Just in case someone other than me has this need, here is the solution to my post above and it’s Tesla Pro theme specific.

Select the configure option (wrench icon) located toward the top of the left-hand sidebar in your RapidWeaver project page, this will reveal a drop down menu of site-wide settings.

Select the “<> code” option, third place below “Settings” and paste the following CSS code in the “CSS:” section:

#mobile_navigation_toggle:after {
content: “Menu”;
display: inline-block;
padding-left: 5px;
}

This will display the hamburger icon, (the three vertical lines that indicate there are additional menu options available if you tap here) followed explicitly by the word “Menu” when viewed on smaller mobile devices like the iPhone. Will not be visible or replace the inline menu options when viewed on larger devices like tablets, laptops and desktops.

The reason I sought out this addition to the Tesla Pro theme is because there are a lot of mobile users that do not find the three vertical lines, hamburger icon, navicon, called it what you will, as being intuitive.

I’d like to make it clear that this confusion is from a user perspective and is not exclusive to the Tesla Pro theme or anything else from Elixir Graphics, they do amazing things. It’s simply a user experience disconnect that occurs regardless of platform.

Not everyone out there, using mobile devices, automatically interprets those three vertical lines as more information and an invitation to tap.

So, at least for the Tesla Pro theme here is away to accommodate as many users as possible.

1 Like
3

Hi, I have tried that but it doesn’t work…

4

Hi, I really try to that, but it doesn’t work. I would like to have the Menu on the left upper corner of the website instead of on the bottom (talking only about the mobile version of the website.) I attached an example. Can you help me? Which code should I insert to achieve that? Thanks

5

URL?

Hard to help without a url.

6

Hi Cristiana, would you mind providing additional information including which theme you are using and as Scott requested, a URL for your site so that we can see what is going on?

Thanks.

7

Hi, I am using the Tesla Pro theme…but the site is new, I don’t have an url jet…that’s a problem, I know. I am trying to adapt the ogo for exampel. it os far to big, but I didn’t manage to find the correct CSS to do so.
Thanks
Cristiana

8

Cristiana, I’m not quite understanding. Are you trying to add the word “Menu” to the three vertical bars that appear on the the mobile representation of the site?