Responsive Navbar

4 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.19
You save:  €37.48
List Price:  £112.24
You save:  £32.07
List Price:  CA$192.60
You save:  CA$55.03
List Price:  A$217.25
You save:  A$62.07
List Price:  S$190.37
You save:  S$54.39
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
List Price:  NZ$236.19
You save:  NZ$67.48
List Price:  د.إ514.11
You save:  د.إ146.90
List Price:  ৳15,319.96
You save:  ৳4,377.44
List Price:  ₹11,694.97
You save:  ₹3,341.66
List Price:  RM669.64
You save:  RM191.34
List Price:  ₦181,567.03
You save:  ₦51,880
List Price:  ₨38,857.05
You save:  ₨11,102.81
List Price:  ฿5,147.32
You save:  ฿1,470.77
List Price:  ₺4,550.80
You save:  ₺1,300.32
List Price:  B$732.62
You save:  B$209.33
List Price:  R2,665.20
You save:  R761.54
List Price:  Лв256.41
You save:  Лв73.26
List Price:  ₩192,455.38
You save:  ₩54,991.18
List Price:  ₪530.55
You save:  ₪151.59
List Price:  ₱8,009.48
You save:  ₱2,288.58
List Price:  ¥21,617.62
You save:  ¥6,176.90
List Price:  MX$2,374.63
You save:  MX$678.51
List Price:  QR509.31
You save:  QR145.52
List Price:  P1,929.29
You save:  P551.26
List Price:  KSh18,618.67
You save:  KSh5,320
List Price:  E£6,790.31
You save:  E£1,940.22
List Price:  ብር7,942.45
You save:  ብር2,269.43
List Price:  Kz117,241.62
You save:  Kz33,500
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
List Price:  CN¥1,013.40
You save:  CN¥289.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
List Price:  DA18,826.63
You save:  DA5,379.42
List Price:  FJ$317.87
You save:  FJ$90.82
List Price:  Q1,085.64
You save:  Q310.20
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
List Price:  DH1,416.82
You save:  DH404.83
List Price:  L2,505.87
You save:  L716.01
List Price:  ден8,074.51
You save:  ден2,307.16
List Price:  MOP$1,125.87
You save:  MOP$321.70
List Price:  N$2,657.05
You save:  N$759.21
List Price:  C$5,137.77
You save:  C$1,468.04
List Price:  रु18,685.75
You save:  रु5,339.16
List Price:  S/525.19
You save:  S/150.06
List Price:  K530.57
You save:  K151.60
List Price:  SAR525.14
You save:  SAR150.05
List Price:  ZK3,528.03
You save:  ZK1,008.08
List Price:  L652.66
You save:  L186.48
List Price:  Kč3,316.71
You save:  Kč947.70
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
List Price:  Bs966.66
You save:  Bs276.20
List Price:  COP$547,598.77
You save:  COP$156,467.96
List Price:  ₡69,943.14
You save:  ₡19,985.18
List Price:  L3,446.12
You save:  L984.67
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In


Hello, in this bootstrap four video, we're going to cover making our navbar responsive. What we mean by that is when we resize in the browser, actually, I'll just show you what happened when I start resizing the browser. So our navbar, right? See it is adjusting. But if we get to a screen size that's really small like this, the content, as you can see, doesn't look very good. And generally, it's, you'll have a hidden with a menu button like that.

But anything by default, so to do that, really simple if you just go to your code, first of all, you want to enclose everything inside your navbar. So all this inside a div, I'm gonna put a div here, the close it off after the form tag, it's indented, so it's easier to see. And the div just needs a couple of classes and the first one is called laps. Next one in nav bar dash toggleable dash x s and the x s part represent the screen size or browser size. It should say though, it's very crucial it should be, I should surely say screen sizes I should say browser size because you could have your website on extra small even though you're on like an extra last screen because your browser has been resized. So when that browser is at the size of extra small only show, I mean only collapse it then and only make it toggleable then otherwise show all of it.

But you can chain this access to the different sizes that you can see right here. So live medium, that sort of stuff. Pretty simple stuff really. Now what we need to do is just add an ID for this ID on collapse. Now boy Callie wifey one. We just need this for when we create button ID I'm pretty sure you seen on websites those three lines which represent a menu, that's what we're going to be adding.

So that just needs something to link to aka something to trigger. So to create that button it's ridiculously simple we just PR a button tag. And inside here is put ampersand ash noise and seven six semicolon Don't worry this one look dodgy or anything like that. This will have the free lines are all this talking about. And this just needs a couple of classes first one is now for dash toggler second one is hidden dash FM dash up. So here's some interesting stuff right here.

We've got hidden dash SM dash up despite FM stands for small so when your bro that is at the small size and up don't show this button because the content is visible, anything below that, which is access more where the content is actually hidden, then show the button. So you can easily mix and match these. And the next thing is going to set the title and a button. Data dash toggle equals collaterals telling you what sort of data it's toggling data, Target, and for this hash and the name of or the ID of our dev. So if we just save that now, go to our web browser, refresh my thinking it doesn't look different. And it doesn't have this browser size, but if I start resizing it, as you can see, now, I'm on a small browser size, the content is now hidden, and I get these free menu button menu lines.

If I click on it, the menu shows and if I click off it, it disappears. If I click on it, and I start resizing again, it automatically adjusts and if I go back, it goes back to the state that he was left in, which is really, really cool. So that's it for a responsive navbar. If you have any questions, feel free to post them on our education platform. So no learning Dakota UK for slash question dot php, there'll be a link in the description. Plus, there'll be another link in the description to source code from this video.

Please rate, comment and subscribe as it really does help us understand whether you liked this video whether you don't like this video. And as usual, thank you for watching, and I hope you have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.