Reputation: 51
Help please, I cannot think of a reason why my hyperlinks don't show on the smallest screens (xs) while they do show and work on other screen sizes. It is likely to be a problem related to the way I've written my code - when I take offline my custom css file (https://balmainmassage.com.au/2015/css/2015.css) my links still don't work, while they do when I take offline bootstrap.min.css. I have NOT modified the bootstrap file.
I have this problem on all pages based on the template 2015.dwt which lives in the Templates
folder in the public_html
folder. An example of a page based on this template is at https://balmainmassage.com.au/2015/january_specials.html. It works at all screen sizes except xs.
However, note that - in the same files - the navigation hyperlinks designed for the xs screen (different than for the other screen sizes, you'll find them after the line <!-- page body ends here, menu and footer start -->
) DO WORK.
Older pages in the site not based on bootstrap do work - of course, although they are not responsive. Really puzzled... Thanks for your help!
Claudio
Upvotes: 2
Views: 1383
Reputation: 5869
The problem is that your div with class nav nav-pills
is overlapping your div with the class col-xs-12
which contains the hyperlinks when the page size is reduced, what you have to do now is to add z-index : 1
to your col-xs-12
class like so :
.col-xs-12 {
z-index: 1;
}
I suggest that you add another class name to your col-xs-12
class to avoid overriding bootstrap css
:
<div class="col-xs-12 MyClassName">
.MyClassName {
z-index: 1;
}
Upvotes: 2