CODEWITHSUNDEEP
csstwitter-bootstraphyperlink
user2814192
user2814192

Reputation: 51

Hyperlinks not working on xs screens in Bootstrap v3.3.1

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

Answers (1)

ZEE
ZEE

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

Related Questions