将自定义导航栏转换为引导程序上的下拉菜单

Question

I want to have the navigation bar I made convert to a dropdown-menu when viewed on a smaller screen (like phones and tablets). The problem is, I didn't use the conventional bootstrap nav bar system, and just made my own. I know that the usual bootstrap solution involves using the nav classes, but I'm not really sure how I'd integrate those into my own code since I didn't use them to begin with. For tablets, I was hoping to have the main menu buttons hide into a dropdown menu with a toggle button, while keeping the logo there. Here is my code:

<header class="main-header" id="Navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
            </div>
            <div class="col-md-6 text-center">
                <div class="row text-center">
                    <div class="col-md-2 offset-md-1">
                        <p class="NavBarButtons"> WHY US </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> FIX YOUR BILL </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> HOW IT WORKS </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> LEARN WITH US </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> COMMERCIAL </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-3 offset-md-4">
                        <p class="NavBarButtons"> LOG IN </p>
                    </div>
                    <div class="col-md-4 md-offset-3">
                        <button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

Since I used the grid system, everything collapses pretty well until a certain point, then the entire header completely messes up and stacks, which is why I wanted to try having the menu buttons go into a dropdown menu when that breakpoint is reached. Any help at all is much appreciated. Thanks!

Answer 1

You lose a lot of baked-in functionality when you try to do this outside a .navbar but it's manageable. The .navbar-collapse component itself isn't directly tied to the use of the larger component; you just need to include the <button> and wrapper element for the collapse:

<header class="main-header" id="Navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
            </div>

            <div class="col-xs-9 text-right">
                <div class="row">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-collapse" aria-expanded="false">
                            <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="collapse navbar-collapse text-center" id="menu-collapse">
                        <div class="col-md-2"><p class="NavBarButtons">WHY US</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">FIX YOUR BILL</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">HOW IT WORKS</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">LEARN WITH US</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">COMMERCIAL</p></div>
                        <div class="col-md-1"><p class="NavBarButtons">LOG IN</p></div>
                        <div class="col-md-1"><button class="SignUp"><b>UNLOCK YOUR POWER</b></button></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</header>

...

Where you run into problems (and why I would recommend using the whole .navbar structure, is that you need to style the aforementioned button and its various states. You'll also need to address spacing concerns (the dropdown pushes elements down in this fashion).

Answer 2

It's pretty nasty, but.. You could do it with some adjustments to your code so that you'll end up with this:

<nav class="main-header navbar navbar-default" id="Navigation">
    <div class="container-fluid">
        <div class="col-md-3 navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png" style="width: auto;">
            </a>
        </div>
        <div class="col-md-6 text-center collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="text-center nav navbar-nav">
                <li class="col-md-2 offset-md-1">
                    <p class="NavBarButtons"> WHY US </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> FIX YOUR BILL </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> HOW IT WORKS </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> LEARN WITH US </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> COMMERCIAL </p>
                </li>
            </ul>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-3 offset-md-4">
                    <p class="NavBarButtons"> LOG IN </p>
                </div>
                <div class="col-md-4 md-offset-3">
                    <button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
                </div>
            </div>
        </div>
    </div>
</nav>

Here's what I did:

1. give the col-md-3 class navbar-header

2. In there add

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 

3. Add <a class="navbar-brand" href="#"> around your img

4. the col-md-6 column, add classes collapse navbar-collapse and id="bs-example-navbar-collapse-1"

5. The div in that one add classes nav navbar-nav

6. Make the header a nav element

7. Give the nav classes navbar navbar-default

8. Remove the row

9. The div in the col-md-6 column, remove the row and make it an ul Turn the div s in there into li s

Basically what you have done now is take the steps necessary to write a bootstrap nav. Take a good look at the example at http://getbootstrap.com/components/#navbar You'll see that it actually doesn't use the grid system.

Keep in mind you need to include the bootstrap javascript to be able to use toggle functionality.

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Also also, don't put p elements in your navigation. Paragraphs don't make any sense there.