CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Fran
Fran

Reputation: 9

Twitter Bootstrap Icon-bar not Displaying

Only 2 of my three icon-bars show when I resize my browser. Previous answers show that people have not put their icon-bars in the right nav tag, however I have done this and it is all correct. My website is viewable here, but here is my code for header.php too:

       <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div id="logo">
                       <a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
                    </div>
                </div>

Upvotes: 0

Views: 3478

Answers (3)

wholevinski
wholevinski

Reputation: 3828

I found this rule on your page:

span {
  color: #fff;
  display: block;
  font-family: centrale_sans_regularregular,helvetica;
  font-size: 30px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
  z-index: 80;

}

from bootstrap.

The position absolute is breaking it; override position to be static or unset for span.icon-bar and it'll fix it.

Upvotes: 1

Bluety
Bluety

Reputation: 1909

You overide the bootstrap styles with your own stylesheet.

You must remove or specify your code (http://www.franhaines.co.uk/style.css) like so:

span:not(.icon-bar) {
  color: #fff;
  font-family: centrale_sans_regularregular, helvetica;
  font-size: 30px;
  z-index: 80;
  position: absolute;
  display: block;
  top: 50%;
  text-align: center;
  width: 100%;
}

Upvotes: 1

Ganesh Salunkhe
Ganesh Salunkhe

Reputation: 598

Same Code Works Fine For Me.

<link href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel = "stylesheet">
<nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div id="logo">
                       <a href="http://http://www.franhaines.co.uk/paddlethewye/"/> <img src="wp-content/themes/BareTheme/logo.png" alt="Paddle the Wye Logo" border="0" /></a>
                    </div>
                </div>

Demo Here

Note: Bootstrap CSS from Here

Upvotes: 0

Related Questions