Bootstrap navbar button works but the button itself doesn't show

Question

    <!---header and Navigation--->
    <header>
        <nav class="navbar navbar-defaault navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
                        <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" href="#featured"><span class="subhead">Jeremy Williams</span></a>
                </div><!---navbar-header--->
                <div class="collapse navbar-collapse" id="nav-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#featured">Home</a></li>
                        <li><a href="#about_me">About Me</a></li>
                        <li><a href="#what_i_do">What I do</a></li>  
                        <li><a href="#my_work">My work</a></li> 
                    </ul>  
                </div><!---collapse navbar-collapse--->
            </div><!---Container--->
        </nav>
      <header>

I'm not sure if I'm missing something but there is something there and if you click it it works but you just can't see the button that is to be clicked.

Answer 1

I think you mean the hamburger button that appears when the screen is small. The three lines are created with <span class="icon-bar"></span> part of the code. They are white, which is why you cannot see them, but they are there (try clicking the top right on small screen). Use CSS to change either the nav the background or the icon-bar.

 .icon-bar {
   background-color:#FF0000 !important;
 }

see the results here: bootply