bootstrap navbar 2 divs one below another

Question

I have the below code and I want the div1 to be above div2. I have tried to do it with css as seen below but I can't get it right and the divs appear next to each other. Since i have both of them to be full width:100%; and float:right; shouldn't they be below each other?

Also, I read about clear:both; that it should do the trick but it did not!

Any thoughts on this?

Thank you

EDIT: I am using Bootstrap 4.0.0.

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light top">
                <img src="images.png" alt="image" class="imageClass">
                <div class="div1 ">
                    <a href="#" id="id1">somthinghere</a>
                    <a href="#" class="active">link</a>
                    <a href="#" class="">link2</a>
                </div>
                <div class="collapse navbar-collapse div2" id="navbarsExampleDefault">
                    <ul class="navbar-nav ml-lg">
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link11</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link111</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1111</a>
                        </li>
                    </ul>                       
                </div>
            </nav>
        </div>
    </header>
</body>

CSS:

header{
    position:absolute;
    z-index: 10;
    width: 100%;
}

.div2{
    clear:both;
    width: 100%;
    float:right;        
}

.div1{
    width: 100%; 
    float:right;
}

It might be worth having look to: https://getbootstrap.com/docs/4.3/layout/grid/ — tschaka1904, Oct 01 '19 at 10:41
@tschaka1904 it's bootstrap 4.0.0. I will amend my question. I checked that and tried it but still nothing — noel293, Oct 01 '19 at 10:55
Could you provide an image of the layout so that we can see what you're trying to achieve? — Charlene Vas, Oct 01 '19 at 11:00
@CharleneVas added! basically two divs (colored ones) inside the nav tag(big black one) and each colored div will have its own elements in it! — noel293, Oct 01 '19 at 11:06

score 1 · Answer 1 · answered Oct 01 '19 at 11:16

1

Use a .row div combined with .col

Demo: http://jsfiddle.net/dx5nL1hy/2/

answered Oct 01 '19 at 11:16

Soufiane Hassou

17,257
2
39
75

this works yes but it stops the navbar from being responsive – noel293 Oct 01 '19 at 11:40
@noel293: getting rid of the .row div should help with that – Soufiane Hassou Oct 01 '19 at 11:46

bootstrap navbar 2 divs one below another

1 Answers1