Twitter Bootstrap Question posted in

Some web page links not working – Twitter bootstrap

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> [email protected]</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.

Tags:

2

Answers


  1. 0

    Take

    float: left;

    out of .topbar-section

    Why do the parent elements have float: left?

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search