CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
jmitteco
jmitteco

Reputation: 11

Navbar Text Hover / CSS Not Working

I wanted to have one of my Navbar tabs look completely different than the others. For some reason the Text Color for the tab I want to display in the hover state works in some browsers but not in others & also seems to be intermittent. The text for the tab "RESERVE NOW" is supposed to be a light green in the link state & turn to a dark green in the Hover state. The background color changes properly but not the text. Mainly not working in Safari.

Any thoughts? Thanks in advance for your input.

Here's a link to the file: http://www.buzzpunchmedia.com/kuyaba/stack.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NavBar</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
    .body-modal {
}
    </style>
    <link href="stack.css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
  </script>
  </head>
  <body>
    <div class="container-fluid" id="wrapper">
<div class="container-fluid" id="nav-container">
    <nav class="navbar navbar-default">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
          <a class="navbar-brand menu-top" href="#">Menu <span class="glyphicon glyphicon-hand-right"></span></a></div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="defaultNavbar1">

 <ul class="nav navbar-nav navbar-right">
              <li id="nav-home"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li id="nav-rooms"><a href="#">Rooms</a></li>
              <li id="nav-restaurant"><a href="#">Restaurant</a></li>
              <li id="nav-bar"><a href="#">Bar</a></li>

              <li class="dropdown" id="nav-more"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li class="active active-text"><a href="#">Gallery/Tour</a></li>
                  <li><a href="#">About/History</a></li>
                  <li><a href="#">Functions</a></li>
                  <li><a href="#">Gift Shop</a></li>
                </ul>
              </li>


              <li id="nav-gallery"><a href="#">Gallery/Tour</a></li>
              <li id="nav-about"><a href="#">About/History</a></li>
              <li id="nav-functions"><a href="#">Functions</a></li>
              <li id="nav-giftshop"><a href="#">Gift Shop</a></li>
              <li class="nav-book" id="nav-book"><a href="#">RESERVE NOW</a></li>
            </ul>            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!-- /.container-fluid -->
        </nav>
      </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

</body>
</html>

<!

 #wrapper {
    padding-right: 0px;
    padding-left: 0px;
    background-image: url(images/bamboo_back.jpg);
    background-repeat: repeat;
}
.navbar.navbar-default {
    border-width: 0px;
    border-radius: 0px;
    background-color: #BFBFBF;
    margin-top: 0px;
    margin-bottom: 0px;
}
#nav-container {
    background-color: #BFBFBF;
        box-shadow: 0px 7px 10px 0px #212121;
    position: relative;
    z-index: 8;
}
.menu-top {
    display: none;
}
.glyphicon.glyphicon-home {
    font-size: 16px;
}
#nav-home {
    font-size: 20px;
}
#nav-rooms {
    font-size: 20px;
}
#nav-restaurant {
    font-size: 20px;
}
#nav-bar {
    font-size: 20px;
}
#nav-more {
    font-size: 20px;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active     >     a:focus {
    background-color: #73a014 !important;
    background-image: -webkit-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%) !important;
    background-repeat: repeat-x !important;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
    font-size: 16px;
}

#nav-book {
    font-size: 20px;
    color: #73A014;
}
.active-text {
    font-size: 20px;
}
.nav-book, .nav-book:focus {
    text-align: center;
    color: #CFF879 !important;
    font-size: 20px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    background-color: #73a014;
    background-image: -webkit-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
    background-image: -moz-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
    background-image: -o-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
    background-image: linear-gradient(180deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
}
.nav-book:hover, .nav-book:active, .nav-book.active, .open .dropdown-toggle.nav-book {
    color: #73a014 !important;
    font-size: 20px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    background-color: #CFF879;
    background-image: -webkit-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
    background-image: -moz-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
    background-image: -o-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
    background-image: linear-gradient(180deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
}
#nav-gallery {
    display: none;  
}
#nav-giftshop {
    display: none;
}
#nav-functions {
    display: none;
}
#nav-about {
    display: none;  
}

Upvotes: 0

Views: 147

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75379

You have a selector and specificity issue in your CSS where your rules are not really targeting the anchors within your list item (you can see that your styles are missing in the inspector tool when selecting the anchor). To fix this, simply define the targeting chain for the anchors within your .nav-book class name like so: 

/* abstracted the list-item styles from the anchor styles */

.nav-book {
  background-color: #73a014;
  background-image: -webkit-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:    -moz-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:      -o-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  background-image:         linear-gradient(180deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
  text-align: center;
}

.navbar-default .navbar-nav .nav-book > a,
.navbar-default .navbar-nav .nav-book > a:focus {
  color: #cff879;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
}

.navbar-default .navbar-nav .nav-book > a:hover,
.navbar-default .navbar-nav .nav-book > a:active,
.navbar-default .navbar-nav .nav-book.active > a,
.open .dropdown-toggle.nav-book {
  color: #73a014;
  font-size: 20px;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  background-color: #cff879;
  background-image: -webkit-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:    -moz-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:      -o-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
  background-image:         linear-gradient(180deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
}

Notice how the chain starts at the top level of your nav item, .navbar-default .navbar-nav, this is because we have to overwrite the specificity of the bootstraps CSS (so we can evade harmful rules such as the !important flag).

Upvotes: 1

Related Questions