Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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. ^^