Highlighted

Trying to alter bootstrap 4 navbar

Enthusiast ,
May 14, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-14 at 21.42.04.png

On a small screen:

Screen Shot 2018-05-14 at 21.35.29.png

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:

Screen Shot 2018-05-14 at 21.52.45.png

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.

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>

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Trying to alter bootstrap 4 navbar

Enthusiast ,
May 14, 2018

Copy link to clipboard

Copied

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:

Screen Shot 2018-05-14 at 21.42.04.png

On a small screen:

Screen Shot 2018-05-14 at 21.35.29.png

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:

Screen Shot 2018-05-14 at 21.52.45.png

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.

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>

Views

1.7K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 14, 2018 0
Adobe Community Professional ,
May 14, 2018

Copy link to clipboard

Copied

Use the flex-column utility class

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2018 1
Enthusiast ,
May 14, 2018

Copy link to clipboard

Copied

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 >

Screen Shot 2018-05-15 at 01.59.13.png

< 991px

Screen Shot 2018-05-15 at 01.51.29.png

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2018 0
LEGEND ,
May 15, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2018 0
Enthusiast ,
May 15, 2018

Copy link to clipboard

Copied

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.

Ha... spot on osgood_

I spent half of yesterday learning what all of this new info is (my py mx ml mr flex-column d-flex and so on), but it just begs more questions which is preventing me from actually understanding what I'm building. Questions like 'my-2' allows for what I think is referred to as 'two spaces' for margin either side on the 'y' axis, but what's the numeric value for the spaces? So, I had to investigate that only to find that my-1 is 0.25rem, my-2 is 0.5rem, and my-3 is 1rem... not 0.75rem which is 3 X my-1! So were's the logic in that? I'm in half a mind to bin off BS4 and go back to BS3, but I do feel that I need to get with it and learn BS4 for the sake of getting freelance/contract work!

I much preferred DW's fluid grid system where you could place a div and visually set its break points based on the media queries you were switching between. It was a much faster workflow which then allowed you to go in and add your own classes and styles to code that had been created for you faster than you could type... well, faster than I could type anyway!

But that's all besides the point... your sample worked a treat for me. Thank you very much for your time.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2018 0
osgood_ LATEST
LEGEND ,
May 15, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/matthew+stuart  wrote

I spent half of yesterday learning what all of this new info is (my py mx ml mr flex-column d-flex and so on), but it just begs more questions which is preventing me from actually understanding what I'm building. Questions like 'my-2' allows for what I think is referred to as 'two spaces' for margin either side on the 'y' axis, but what's the numeric value for the spaces? So, I had to investigate that only to find that my-1 is 0.25rem, my-2 is 0.5rem, and my-3 is 1rem... not 0.75rem which is 3 X my-1! So were's the logic in that? I'm in half a mind to bin off BS4 and go back to BS3, but I do feel that I need to get with it and learn BS4 for the sake of getting freelance/contract work!

Unfortunately I accept that is the way web-development is heading these days, more investigation is needed and more time spent in the browser development tool area if you use a framework, rather than actually doing any positive coding oneself. A lot of the profession has deteriorated into construction by numbers, or more to the point classes, rather than using ones own skills and I doubt it will change anytime soon.

You do need to learn Bootstrap 4 if you're intending to have a long term career in the buisness, or at least have a good understanding of how it works to be able to make an accessement of how really terribly bad it is. I'd rather stab my own eyes out than contiue in a profession which 'forced' me to go down that route, fortunately I have options.

Happy Bootstrapping......

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2018 0