Joomla Templates Club 406,261 posts

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#954345

I am trying to experiment on the position "top-right" on this template and would like to show a FA icon only when viewing the site with smaller screen.

I have understood that one can use

<em class="fa fa-phone hidden-lg hidden-md hidden-xs"></em>

Please explain all these possible features and how to use them.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#954370

Hi
Hidden-xs is used for extra small
you should remove it from the code so it can be shown .
More info On responsive classes Here

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#954403

Thanks, now it is all working as I want it except from the small vertical grey line that still is present when hiding in smaller screens.

I use the following code for 3 links in the uppder right-top position

<ul>
<li><em class=""></em><span class="hidden-xs gray-light"><a href="index.php?option=com_k2&view=item&layout=item&id=47&Itemid=460"> Föreslå ny kategori</a></span></li>

<li><em class=""></em><span class="hidden-xs gray-light"><a href="index.php?option=com_k2&view=item&layout=item&id=46&Itemid=459"> Rekommendera ny Webbutik</a></span></li>

<li><em class="fa fa-envelope-o"></em><a href="index.php?option=com_k2&view=item&layout=item&id=42&Itemid=276"> Kontakta oss</a></li>
</ul>

Any suggestions on how to remove the grey line when hiding ?

---

Attachments:

1. 
2. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#954413

Hi,
post your working site URL here

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#954419

I just added admin login info. The menu appears on every page on my site at the right top corner. Decrease the browser window and you will see what happens.

Hope to hear from you soon again.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#954537

Hi
i am getting a different view in mobile >> http://prntscr.com/by7p85
Please check , there is no line as in your screenshot .

[christofferl Friend christofferlJoin date: January 2011Posts: 233Downloads:30Uploads:101 Thanks: 21 Thanked: 2 times in 1 posts]

#954603

Your image that you sent is just as it should be. If you look carefully in the images I sent you the ja_line1.png shows the light grey vertical line appearing. I would like to get rid of it when shrinking the screen resolution togheter with the text that disappears. If you expand the browser all text including the grey vertical lines appear as seperator – just as it should.

Please let me know if you understand what I mean. If not I will clarify it in more details.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#954615

Hi
Add below code in custom.css file

@media (max-width: 7680px) {
.t3-top-bar .top-right ul li + li {
    border-left: none;
} }

save and check .

1 user says Thank You to Pankaj Sharma for this useful post

1. christofferl

[Author]

Posts