Joomla Templates Club 406,261 posts

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#184579

Hi,

In my opinion it is not clear enough that you need to press a button to open the main menu in the mobile version. I would like to add a text next to it (for example: click to open menu). I am providing a screen shot. How can I add the text in the mobile version only?

Thanks.

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#482334

Hi etchot,

try this :

Take backup first

1. Open templatesja_merocsstemplate-responsive.css
Then remove codes:


.ja-mainnav .navbar .btn-navbar {
background: #252525
border: 0;
text-indent: -999em;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.ja-mainnav .navbar .btn-navbar .icon-bar {
background: #373737
}
.ja-mainnav .navbar .btn-navbar:hover {
background: #1ba1e2
}
.ja-mainnav .navbar .btn-navbar:hover .icon-bar {
background: #fff
}

. Then Save
2. Open templatesja_merotplsblocksmainnav.php.
Then replace:

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

with :

<p class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
Open Menu
</p>
You can see my attached image for example.

Regards,
—
Leo

---

Attachments:

1. 

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#482589

Hi Leo,

Thank you for your reply. I followed the steps you mentioned in your post. Unfortunately, I did not get the same results as you. I did not mentioned you that I am using my own theme (modified version of light theme) but I also tried to change template-responsive.css in templatesja_merocssthemescustom-theme. Attached is a screen shot.

Regards,
Etchot

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#482621

Hi etchot,

It still works as i mentioned above although I set default style JA_Mero – Light.

Regards,
—
Leo

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#482769

Hi Leo,

Thanks for checking it with the JA_Mero – Light template. I made some changes in my website through the custom.css file. I will review them because I believe that can be the reason why I do not get the right results.

Regards,
Etchot

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#482830

Hi Leo,

Finally, I did the steps below and it worked. Thank you for your help.

1. Open templatesja_merotplsblocksmainnav.php and replace:

[PHP]<button type=”button” class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>[/PHP]

with:

[PHP]<p class=”btn btn-navbar” data-toggle=”collapse” data-target=”.nav-collapse”>Menu</p>[/PHP]

2. I did not open templatesja_merocsstemplate-responsive.css and remove code.
3. Create/open templatesja_merocsscustom.css and add:

.ja-mainnav .navbar .btn-navbar {
text-indent: 0;
}

Regards,
Etchot

[Author]

Posts