I am facing an issue with the navigation bar on my website. The navigation bar code is as follows:
<nav class="text-center">
<button class="btn nav-button color-house" type="button"><%= link_to "House", home_house_path, class: "color-house" %></button>
<button class="btn nav-button color-spouse" type="button"><%= link_to "Spouse", home_spouse_path, class: "color-spouse" %></button>
<button class="btn nav-button color-kids" type="button"><%= link_to "Kids", home_kids_path, class: "color-kids" %></button>
<button class="btn nav-button color-neutral" type="button"><%= link_to "Blog", blogs_path %></button>
</nav>
On desktop, everything looks perfect as shown in this image.
However, when viewed on a mobile device, there is a strange grey background as seen in this image.
Interestingly, when I use the Chrome inspector's mobile simulator, it appears fine. The issue only occurs when viewed on an actual phone.
You can visit the live site here to see the problem firsthand.
I suspect this might be related to Bootstrap 4, as I haven't encountered this on non-Bootstrap sites.
I have tried adding
background-color: white !importantbtn and nav-button classes, but it didn't resolve the issue. The only custom CSS I have is:
$color-house: #84C99A;
$color-spouse: #313E50;
$color-kids: #EFB0A1;
$color-neutral: #B7AD99;
$color-black: #26010C;
.color-house { color: $color-house; }
.color-spouse { color: $color-spouse; }
.color-kids { color: $color-kids; }
.color-neutral { color: $color-neutral; }
.color-neutral-hover:hover { color: $color-black; }
.nav-button a {
font-family: $font-script;
display: inline-block;
font-size: 30px;
padding-top: 10px;
margin: 10px 10px 20px 10px;
border-top: solid thin white;
border-top: solid thin white;
}
@media screen and (max-width: 800px) {
.nav-button a {
margin: 10px 5px 30px 5px;
font-size: 25px;
}
}