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

**URL:** <https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236>\
**Category:** RapidWeaver Classic\
**Created:** [July 17, 2017, 6:20pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236 "2017-07-17T18:20:03Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 17, 2017, 6:20pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/1 "2017-07-17T18:20:03Z")

</div>

I just restyled [my website](http://www.diegocuoghi.it/home/) 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?

---

<div class="post-metadata">

**Author:** ![jabostick](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jabostick/32/1760_2.png) [@jabostick](https://forums.realmacsoftware.com/u/jabostick)\
**Post date:** [July 17, 2017, 6:32pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/2 "2017-07-17T18:32:04Z")

</div>

If there’s a way to target that font for that one specific item, you could maybe use a font such as [this](http://www.dafont.com/tele-marines.font) 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

---

<div class="post-metadata">

**Author:** ![davidfreels](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/davidfreels/32/5807_2.png) [@davidfreels](https://forums.realmacsoftware.com/u/davidfreels)\
**Post date:** [July 17, 2017, 7:01pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/3 "2017-07-17T19:01:37Z")

</div>

[Apple.com](http://Apple.com) uses 2 lines instead of 3.

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 17, 2017, 9:26pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/4 "2017-07-17T21:26:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bobafifi](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bobafifi/32/8125_2.png) [@bobafifi](https://forums.realmacsoftware.com/u/bobafifi)\
**Post date:** [July 17, 2017, 9:31pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/5 "2017-07-17T21:31:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 8:21am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/6 "2017-07-18T08:21:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bobafifi](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bobafifi/32/8125_2.png) [@bobafifi](https://forums.realmacsoftware.com/u/bobafifi)\
**Post date:** [July 18, 2017, 9:14am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/7 "2017-07-18T09:14:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 9:40am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/8 "2017-07-18T09:40:30Z")

</div>

Thank you for the instructions, but I haven’t understand where I have to change the code.  
In every .html file 😧 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?

---

<div class="post-metadata">

**Author:** ![bobafifi](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bobafifi/32/8125_2.png) [@bobafifi](https://forums.realmacsoftware.com/u/bobafifi)\
**Post date:** [July 18, 2017, 9:47am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/9 "2017-07-18T09:47:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\
**Post date:** [July 18, 2017, 10:24am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/10 "2017-07-18T10:24:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 11:27am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/11 "2017-07-18T11:27:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![webdeer](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/webdeer/32/5299_2.png) [@webdeer](https://forums.realmacsoftware.com/u/webdeer)\
**Post date:** [July 18, 2017, 11:52am UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/12 "2017-07-18T11:52:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 1:46pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/13 "2017-07-18T13:46:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bobafifi](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bobafifi/32/8125_2.png) [@bobafifi](https://forums.realmacsoftware.com/u/bobafifi)\
**Post date:** [July 18, 2017, 2:06pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/14 "2017-07-18T14:06:40Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 4:29pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/15 "2017-07-18T16:29:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![instacks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/instacks/32/23339_2.png) [@instacks](https://forums.realmacsoftware.com/u/instacks)\
**Post date:** [July 18, 2017, 6:18pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/16 "2017-07-18T18:18:58Z")

</div>

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:

```auto
#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](https://instacks.com)_

---

<div class="post-metadata">

**Author:** ![Trystero](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/trystero/32/725_2.png) [@Trystero](https://forums.realmacsoftware.com/u/Trystero)\
**Post date:** [July 18, 2017, 7:22pm UTC](https://forums.realmacsoftware.com/t/how-to-put-three-lines-icon-menu-in-a-theme-with-two-lines/15236/17 "2017-07-18T19:22:51Z")

</div>

Thank you Jannis!  
**It works!** 😀

Now only in the RW [project preview](http://www.diegocuoghi.it/forum/3linesmenu.jpg).  
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.