Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Bootstrap Navbar Problem - 1

Hi,

I got a problem that when i see the navbar on menu, the navbar button doesnt apear .

<!DOCTYPE html>
<html lang="en">
<head>
  <title>E-Commerce Shop <?php echo date('Y') ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Seo meta -->
    <meta name="keywords" content=" Leicester,student, web,developer,designer, Leicester Developer" />

  <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
    <body>

        <!-- Header -->
            <header id="header">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="container">

                            <!-- Brand and toogle -->



                                <!-- Header Top -->
                                    <div class="collapse navbar-collapse" id="topHeader">
                                        <div class="navbar-header"> 

                                             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarBottom">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                              </button>

                                            <a href="/" class="navbar-brand pull-left" >E-COMMERCE SITE</a>

                                        </div><!-- /navbar-header -->
                                    </div><!-- /collapse navbar-collapse -->

                                    <!-- Search Navbar -->
                                            <form class="navbar-form navbar-right" role="search" id="searchNavbar">
                                                <div class="form-group">
                                                    <input type="text" class="form-control" placeholder="Search this site">
                                                </div><!-- /form-group -->
                                                <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
                                            </form>




                            <!-- Nav Links -->
                                <div class="collapse navbar-collapse" id="navbarBottom">
                                    <ul class="nav navbar-nav pull-left">
                                        <li>
                                            <a href="">Home</a>
                                        </li>
                                        <li>
                                            <a href="">Market</a>
                                        </li>
                                        <li>
                                            <a href="">Domy & Pokoje</a>
                                        </li>
                                        <li>
                                            <a href="">Prace</a>
                                        </li>
                                        <li>
                                            <a href="">Auta</a>
                                        </li>
                                        <li>
                                            <a href="">Grupa</a>
                                        </li>
                                        <li>
                                            <a href="">FQA</a>
                                        </li>
                                    </ul><!-- /left-navbar -->
                                    <ul class="nav navbar-nav pull-right">
                                        <li>
                                            <a href="">Sign In</a>
                                        </li>
                                        <li>
                                            <a href="">Sign Up</a>
                                        </li>
                                    </ul>
                                </div><!-- /collapse navbar -->

                        </div><!--/ container-->
                    </div><!-- /container-fluid -->
                </nav><!-- /navbar-default -->
            </header>

        <!-- Content -->

        <!-- Footer -->

    </body>
</html>

I tried many thing

1 Answer

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

I managed to sort it out. I had to put the navbar-header outside , as first div and then the collapse put inside it and after the button. ^^