How do I make top-links appear in the header on opencart mobile platform

Question

I added some links into my header.tpl and when you look at the site on mobile they are completely missing. the site in question is 'theautoall.com' and the code for example of what I added is:

<li><a href="<?php echo $home; ?>" title="Lots more coming soon!"><span 
class="hidden-xs hidden-sm hidden-md"><strong>SITE CURRENTLY UNDER 
CONSTRUCTION</strong></span></li>

How can I make these appear on mobile device, and should I make the links shorter so they look more clean on mobile?

Answer 1

Check your span styles 'hidden-xs hidden-sm hidden-md' in style sheet. They maybe using have display:none. If so, change this to display:block or remove the span class all together. If you only wish to show this in mobile version only, you will need to add a media query, for example

@media (max-width: 768px) { .hidden-xs, .hidden-sm, .hidden-md

}

Answer 2

The link is not appearing on mobile devices because the file mentioned below has the CSS code in it which is mentioned below:

File: https://theautoall.com/catalog/view/javascript/bootstrap/css/bootstrap.min.css

Code:

>     @media (max-width: 767px)
>     .hidden-xs {
>         display: none!important;
>     }