0

I've taken over a website that was built on Bootstrap, and it has been brought to my attention that the hover color on Safari mobile does not work on the mobile navigation. When you select an option from the menu, it's supposed to change the color to yellow. Currently, no type of hover/selection effect happens regardless of what is implemented. The background color remains gray. I've tried all the CSS I can possibly think of to change it, but I'm struggling to find the right string of selectors to target the hover color specifically because there's multiple CSS files being used on it. Any pointers for the right selector? 

<div id="second-navbar" class="navbar mega-menu" role="navigation">
  <div class="container">
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-responsive-collapse">
      <div class="menu-container">
        <ul class="nav navbar-nav">
          <!-- mobile navbar -->
          <li><a href="book-now">Book Now</a></li>
          <li><a href="womens-services">Women's Services</a></li>
          <li><a href="mens-services">Men's Services</a></li>
          <li><a href="waxon-way">Waxon Way</a></li>
          <li><a href="why-franchise">Own A Waxon</a></li>
          <li><a href="contact">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

This is the website to view the source code.

cweave
  • 306
  • 4
  • 13
  • Is it white on Safari? inspecting the hover state on those li's there the background-color is set to #fff !important – gwar9 Oct 17 '17 at 13:21
  • @gwar9 no, the background color remains gray. There's no type of hover/section effect at all. – cweave Oct 17 '17 at 13:22
  • I just reread you said safari mobile. I just ran your site in browserstack in safari and the hover color works. If you are expecting to see the hover color on tap (on a touch device) your probably arent since hover doesnt work on mobile devices. – gwar9 Oct 17 '17 at 13:30
  • @gwar9 If you go to [this page](https://waxon.ca/waxon-way) , the background color changes when you click on the page jump links. The navigation background color change works on Android Chrome. – cweave Oct 17 '17 at 13:40
  • Oh you mean the text color not the backgorund color correct? And are referring to the main nav? Locations Waxon Way etc ? – gwar9 Oct 17 '17 at 14:02
  • @gwar9 background color for mobile navigation. [This is on Android Chrome](https://ibb.co/cps0RR) – cweave Oct 17 '17 at 14:23
  • 1
    I see now. This may not be a csss issue as you have an active class triggering the color (I just tested on iphone) checkout this ticket https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari – gwar9 Oct 17 '17 at 14:29
  • @gwar9 thank you so much for all your help! I will look into that and hopefully resolve this issue. – cweave Oct 17 '17 at 14:47

0 Answers0