Currently the icon for the mobile menu button is three black dots and three small lines. I want to change this to a small button that says "menu".

Could you please tell me where the icon is/ icon name so that I can change it?

Could you please tell me how to modify the code to widen the icon area?

Thanks - Ottoman

Ottoman,

What you are asking will require changing a core PHP template file... slightly! Here is my road-map;

Edit this file
templates/responsive/tpls/blocks/nav.php
Look for this
<span class="icon-list-ul"></span>
Change to this
<span class="icon-chevron-left"> Menu</span>

Remember, you are adjusting a core template file that may get over-written with any theme updates to do. So... keep documentations on your adjustment!!!

This menu icon button is being generated using Font-Awesome (fontawesome.io/icons/) and being quarterback by the JBType plugin. Using this code adjustment it will produce something like the image attached.



I'm using the Nebula theme as an example but the Responsive theme uses the same format.

Ed

Another option folks have used is to add "Menu" to the existing icon using a media query

@media (min-width: 320px) and (max-width: 1010px) {

.icon-list-ul:after {content:"Menu"; padding-left:.5em}

}

This again is using nebula so the values used may need to be adjusted

Cheers
Paul

Please follow Paul's approach. It's much cleaner that does not require mucking around with the template's core files. Thanks Paul... just added this to the Nebula theme I'm working on!!!

Ed

No problem Ed

You're welcome

Cheers
Paul

Thanks so much everyone for your help. I have not done a media query before as you outlined below.

If it's not too much trouble can you please tell me how?

Thanks - Ottoman

"Another option folks have used is to add "Menu" to the existing icon using a media query

@media (min-width: 320px) and (max-width: 1010px) {

.icon-list-ul:after {content:"Menu"; padding-left:.5em}

}"

Ottoman,

Just copy the CSS Paul gave you and place it at the bottom of your custom.css file. His media query effects all screen sizes between 320px & 1010px. You can adjust these screen sizes to you specific needs.

Ed

It worked beautifully.

go to www.SuperEmotions.com and make narrow your browser width until it pops up.

Thanks guys.

Happy New Year.

I am so impressed with joomlabamboo. If you need a testimonial I will be happy to provide one. I used a different service for the last couple of years and there's no comparison.

Yep can see it in action

We'd love to have a testimonial

Thanks
Paul

Being slightly cheeky here but it would be great if you could create a new thread and add it there

Thanks again

Cheers
Paul

This just what I was looking for. Thanks.
However I still can't understand why the 3dot icon doesn't show at all.
Nor does the return to top arrow?

Sean

www.edgeneve.ch/bjg

the sister site shows it perfectly
www.edgeneve.ch

Is JB Type installed and enabled?

Cheers
Paul

oops quite right JBtype was installed but not enabled.

thanks Paul

Sean

No worries

Cheers
Paul