How to put three lines icon menu in a theme with two lines?

RapidWeaver Classic
1

I just restyled my website using N-Spire Deux by Nick Cates.
I’m satisfied with the result, apart one thing I hate: in the phone size the menu icon has two lines instead of three.

I wrote to the author asking how to change that icon with some css or other code, to have the standard three lines.
He said it is impossible because “it’s the keyboard equal “=” symbol, and cannot be changed with code”.
So I think it is produced by the only one font used in the theme: Rubik.

I do not want to be boring and I will not write him again, but I really hate that menu icon, so I ask if you know a way to change it.
Maybe redrawing the font with Fontographer or similar software?

2

If there’s a way to target that font for that one specific item, you could maybe use a font such as this where the style of the ‘E’ is three horizontal lines. I don’t know how to target that menu item and swap in a different font though.

Although, if it were me, I’d skip the hassle and just get used to the 2 lines haha

3

Apple.com uses 2 lines instead of 3.

4

Ok, I’ve seen Apple site, but I still like the 3 lines.

5

Sounds like what you’re looking for is the “hamburger” icon (for example, top right of this forum):
http://fontawesome.io/icon/bars/

6

Yes, that one, the same as in this page menu, top right.
But it seems impossible to have it in that theme.

7

Not impossible, you just have to add fontawesome to your site and modify the HTML and CSS in this section:
<div id="nav_trigger"> <span> = <div class="ncd-effect" style="opacity: 1; transform: matrix(0, 0, 0, 0, 0, 0);"></div> </span> </div>

However, should Nick ever update the theme, it may overwrite your modifications and you’ll have to repeat the steps all over.

8

Thank you for the instructions, but I haven’t understand where I have to change the code.
In every .html file :anguished: or in the Rapidweaver CSS options?

And about fontawesome… I do not know how to add and where. In the Rapidweaver project or somewhere in the hosted website?

9

No, you’d modify the theme, and then republish. To add font awesome you just download from their site and then upload to your server. Then it’s simply a mattter of linking it to your theme and putting the font awesome hamburger tag in that section and styling to suit your taste.

10

Another quick solution could be to change the “=” for “menu” and make the text size about 20px instead of 36px. The word menu, makes more sense than the equal symbol to me.

11

@webdeer
Ok, but where is that code in the theme?

12

I don’t use themes and don’t know how they are constructed so can’t advise where it is. However, I expect it is easy to find by searching the contents of the files in the theme for an occurrence of ‘=’ and then change this into ‘menu’ and save. In the Media Manager find the theme in Finder and see what you see. It may be in index.html as it is clearly visible from the inspector in Safari. Why not ask the developer where it is?

13

I asked “where is?” because I searched in a lot of files in the theme “packet”, but I haven’t find that code. There are many “=” but no one is the right one.

14

I’d search for
<div id=“nav_trigger”>

or
nav_trigger

or as Gary said, just ask Nick (who knows, if you tell Nick what you’re trying to do, he might just change the theme for you).

15

I asked Nick, as I wrote in my first post here.

16

It shouldn’t be that difficult. Try this:

Add on side wide head code this line to load font awesome on every page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Add following in side wide CSS code area:

#nav_trigger span {
    color: transparent;
}

#nav_trigger span:before {
    font-family: FontAwesome;
    color: #FFFFFF;
    content: "\f0c9";
}

Maybe the placing and size isn’t 100% accurate, but that can be done also.

Cheers, Jannis
inStacks Software

5 Likes
17

Thank you Jannis!
It works! :grinning:

Now only in the RW project preview.
I will add it in the next update of my site, because after the the change the blue dots appear in every page, and I have a lot of pictures, around two hours of upload.

1 Like