Skip to main content
M
matthew stuart
Inspiring
May 14, 2018
Answered

Trying to alter bootstrap 4 navbar

  • May 14, 2018
  • 1 reply
  • 2683 views

Hi all, I am trying to alter the layout of the bootstrap 4 navbar so they look something like the screens shots provided.

On desktop:

On a small screen:

Basically, I want to add in the logo, search box, phone number and cart button above the navigation and then have some of it hide when on a small screen, which is fine when it collapses, but I can't get the thing to sit in two lines on a big screen no matter what I do. It looks like this:

Ignore the design for now, it's the positioning I'm struggling with, but as you can see, the div on the left with the navbar-brand and the search sits to the left of the collapsible contant rather than on top. I've tried style="clear: both; float: none;" within the div, but it's being overridden somehow.

Can anybody advise how I might go about this please?

If you know of any, could you post a link to tutorials that explain a bit more about this, or could you suggest what I might search for as I have searched for tutorials but have only ever found basic ones about shifting content to the right, changing nav backgrounds etc... nothing about being able to add in content above that which collapses; so I'm obviously not searching with the correct keywords.

Thanks.

    This topic has been closed for replies.
    Correct answer osgood_

    Below is example coding of what you require - Bootstrap 4. Bootstrap uses 'rows' to organise elements.

    Would I personally use Bootstrap in production, never in a million years, its a poor way to produce code as you end up with a zillion classes names and <divs>splattered all over your html making it virtually impossible to diagnose what is happening. The more I explore Bootstrap the more evil it becomes. For instance what insane workflow would force you to wrap an h5 tag in a <div> just to negate the padding and margin when you then apply the utilities classes of d-sm-none d-lg-block to it other wise it wont adher to flex-center..........totally insane. You can really tell that whoever came up with the framework has zero experience of web-developing on a day to day basis otherwise it wouldnt be so poor......or could it be its original intention was to develop back-end apps wher it really doesnt matter what they look like.....go figure.

    <!DOCTYPE html>

    <html>

    <head>

    <title>Title of the document</title>

    <!-- Latest compiled and minified Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    </head>

    <body>

    <div class="container ">

    <nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-light bg-light d-flex flex-column">

    <div class="row col-12 justify-content-between">

    <div class="col-4">

    <a class="navbar-brand" href="#">Furniture4Rent</a>

    </div>

    <div class="col-8 d-flex justify-content-end  align-items-center">

    <form>

    <div class="input-group">

    <input type="search" placeholder="Search" aria-label="Search">

    <button class="btn btn-outline-secondary" type="submit">Go</button>

    <div class="d-flex align-items-center"><h5 class="d-sm-none d-lg-block font-weight-normal p-0 m-0 mx-2">01234 567890</h5></div>

    </div>

    </form>

    <a href="#" class="mx-2">Cart</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

    </div>

    </div>

    <!-- end row -->

    <div class="row col-12 justify-content-end">

    <div class="collapse navbar-collapse" id="navbarSupportedContent1">

    <ul class="navbar-nav ml-auto">

    <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

    <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>

    <div class="dropdown-divider"></div>

    <a class="dropdown-item" href="#">Something else here</a> </div>

    </li>

    <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>

    </ul>

    </div>

    </div>

    <!-- end row -->

    </nav>

    </div>

    <!-- end container -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    </body>

    </html>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 14, 2018

    Use the flex-column utility class

    Nancy O'Shea— Product User & Community Expert
    M
    matthew stuartAuthor
    Inspiring
    May 15, 2018

    Hi Nancy, thanks for responding... that's kind of muddied the waters a bit for me simply because this is my first foray into BS4. I get what flex-column is trying to achieve and what it's replaced, but I'm not getting the desired result. Basically, I am getting the same thing as before on the desktop version, so I am obviously doing something wrong! It's looking and responding how I want it to on the mobile version 991px and below, but at 992px and above it's not looking good:

    992px >

    < 991px

    I'm sorry to do this, but could I be presumptuous and ask you to take a look at my code and see if you could indicate where I need to include the flex-column utility class, and which version of it please? I've tried numerous (d-flex, flex-column, flex-nowrap... etc). I've got into a bit of a pickle now and it's quite possible that I am missing some sort of wrapper or div with further classes required.

    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">

    <!-- start first nav row -->

    <div class="container flex-column">

    <a class="navbar-brand" href="#">Brand</a>

    <form class="form-inline ml-auto">

    <div class="input-group">

      <input class="form-control ml-sm-2" type="search" placeholder="Search" aria-label="Search">

      <div class="input-group-append"><button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">Go</button></div>

    </div>

    </form>

    <a href="#" class="mx-2">Cart</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

    </div>

    <!-- start second nav row -->

    <div class="container flex-column">

    <div class="collapse navbar-collapse" id="navbarSupportedContent1">

    <ul class="navbar-nav ml-auto">

      <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

      <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>

      <div class="dropdown-divider"></div>

      <a class="dropdown-item" href="#">Something else here</a> </div>

      </li>

      <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>

    </ul>

      </div>

    </div>

    </nav>

    Many thanks.

    O
    osgood_Correct answer
    Legend
    May 15, 2018

    Below is example coding of what you require - Bootstrap 4. Bootstrap uses 'rows' to organise elements.

    Would I personally use Bootstrap in production, never in a million years, its a poor way to produce code as you end up with a zillion classes names and <divs>splattered all over your html making it virtually impossible to diagnose what is happening. The more I explore Bootstrap the more evil it becomes. For instance what insane workflow would force you to wrap an h5 tag in a <div> just to negate the padding and margin when you then apply the utilities classes of d-sm-none d-lg-block to it other wise it wont adher to flex-center..........totally insane. You can really tell that whoever came up with the framework has zero experience of web-developing on a day to day basis otherwise it wouldnt be so poor......or could it be its original intention was to develop back-end apps wher it really doesnt matter what they look like.....go figure.

    <!DOCTYPE html>

    <html>

    <head>

    <title>Title of the document</title>

    <!-- Latest compiled and minified Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    </head>

    <body>

    <div class="container ">

    <nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-light bg-light d-flex flex-column">

    <div class="row col-12 justify-content-between">

    <div class="col-4">

    <a class="navbar-brand" href="#">Furniture4Rent</a>

    </div>

    <div class="col-8 d-flex justify-content-end  align-items-center">

    <form>

    <div class="input-group">

    <input type="search" placeholder="Search" aria-label="Search">

    <button class="btn btn-outline-secondary" type="submit">Go</button>

    <div class="d-flex align-items-center"><h5 class="d-sm-none d-lg-block font-weight-normal p-0 m-0 mx-2">01234 567890</h5></div>

    </div>

    </form>

    <a href="#" class="mx-2">Cart</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

    </div>

    </div>

    <!-- end row -->

    <div class="row col-12 justify-content-end">

    <div class="collapse navbar-collapse" id="navbarSupportedContent1">

    <ul class="navbar-nav ml-auto">

    <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>

    <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>

    <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>

    <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>

    <div class="dropdown-divider"></div>

    <a class="dropdown-item" href="#">Something else here</a> </div>

    </li>

    <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>

    </ul>

    </div>

    </div>

    <!-- end row -->

    </nav>

    </div>

    <!-- end container -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices