Some web page links not working

Question

Hello am using the Twitter-Bootstrap framework to develop a website for a client but I have hit a wall and I don't know what may be causing It. Before I go any further I will throw in my html and css code then explain the problem.

 @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'); body { font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; } a { text-decoration: none; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } /* TOP OF THE PAGE */ #header { float: left; width: 100%; position: relative; z-index: 999; } .topbar-section { float: left; width: 100%; background: #f5f5f5; border-bottom: 1px solid #ccc; } .top-social { float: left; width: 100%; } .top-social a { font-size: 14px; color: #777; line-height: 50px; } .top-social ul { padding: 0; margin: 0; list-style: none; } .top-social ul li { float: left; padding: 0; width: 50px; border-left: 1px solid #ccc; } .top-social ul li.last { border-right: 1px solid #ccc; } .top-social ul li a { text-align: center; display: block; text-decoration: none; } .top-social a.email { font-weight: 400; float: left; padding: 0 0 0 20px; text-decoration: none; } .logo-section { float: left; width: 100%; } strong.logo { float: left; margin: 0; padding: 20px 30px 20px 0; } strong.logo a { font-size: 18px; text-transform: uppercase; } .book-section { float: right; width: 100%; padding: 15px 0; } .number-box { float: left; padding: 0 30px 0 0; } .number-box span { color: #777; display: block; padding: 0; } .number-box strong { font-size: 24px; font-weight: 700; color: #222; display: block; } div.btn-book-box { padding: 10px 0 0; } div.btn-book-box a.btn-book { padding: 10px 15px; font-size: 18px; text-transform: uppercase; text-decoration: none; color: #fff; background-color: #9bc83c; } div.btn-book-box a.btn-book:hover { background: none; border: 1px solid #444; color: #222; } /*.navigation*/ .navbar { border-radius: 0; } /*.navigation */.navbar-inverse { background-color: transparent; border-color: transparent; } /*.navigation */.navbar-inverse .navbar-collapse { border-color: #ccc; } .nav-outer { background: #fff; border: 1px solid #999; float: left; width: 100%; -moz-box-shadow: 0 0 4px rgba(0,0,0,0.1); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1); box-shadow: 0 0 4px rgba(0,0,0,0.1); } 

 <div id="header"> <div class="topbar-section"> <div class="container"> <div class="col-md-6"> <div class="top-social"> <ul> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li class="last"><a href="#"><i class="fa fa-facebook-f"></i></a></li> </ul> <a href="mailto:" class="email" title="Send us an email"> <i class="fa fa-envelope-o"></i> info@prideafricasafaris.com</a> </div> </div> </div> </div> <div class="logo-section"> <div class="container"> <div class="col-md-6"> <strong class="logo"><a href="#">Pride Africa Safaris</a> </strong> </div> <div class="col-md-6"> <div class="book-section"> <div class="number-box"> <div class="number-text"> <span>Call us for any Query</span> <strong><i class="fa fa-phone"></i> +256 7** 5** 6**</strong> </div> </div> <div class="btn-book-box"> <a href="#" class="btn-book">Book Now</a> </div> </div> </div> </div> </div> <div class="navigation"> <div class="navbar navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="nav-outer"> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Team</a></li> <li><a href="#">Trips</a></li> <li><a href="#">Events</a></li> <li><a href="#">Booking</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

Since now you have seen my code, The problem is when I include the div with the class navigation, the links within the top-social and logo-section divs remain static and non-reactive but when I remove the div with the class navigation, everything seems to work normally, what could be the issue here? Thanks In advance.

Answer 1

Why are you floating all your sections? They are floating over each other right now.

Remove the float property from your topbar-section div, your top-social div as well as your logo-section div and the elements will be clickable again.

Example for topbar-section :

.topbar-section {
    float: left; <<-- REMOVE THIS
    width: 100%; <<-- REMOVE THIS TOO
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
}

Link to jsFiddle: https://jsfiddle.net/AndrewL32/d9rpvkpg/3/

---

Also, I noticed that you're using float on certain other elements in your fiddle too. Remove them and keep only the one's which are necessary.

Do read this: https://developer.mozilla.org/en/docs/Web/CSS/float to understand how float works.

Answer 2

Take

float: left;

out of .topbar-section

Why do the parent elements have float: left?