Navbar Collapsible Content

3 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 show you collapsible content. At the moment, we have a great looking navbar. But what we can do is make it hidden by default and have a menu button, which opens it. So it's collapsible, you can open and close it. To do that it's really simple. First of all, with your NAB, this needs to add a class of collapse.

They need to add an ID, so our button knows what item is triggering. So for this, I'm simply going to put now one probably want to name me a lot better than that. And that's it in terms of the coding for the nav bar. Now we just need to just create the button. What I'm going to do is creating Nova nav, so class equals nav bar, nav bar, dash like yummy To do this, you can just create the button that I'm going to put inside it. The reason I'm actually doing this is because it looks more professional and how it generally would look on a website.

So we've got the navbar set up inside, it's going to put a button so class of button. And you can either turn to Me nav bought toggle toggler, sorry, type equal, but turn data dash toggle. So what sort of data are we toggling? It collapse is a collapsible piece of item. Now we need to put data targets or data target, and this is the ID that we set right here. So just copy and paste up and inside, we're just going to put ampersand hash 97767 Cola, and you'll see what this looks like.

You might think, Oh, this looks crazy. But when you see the visual implication of what we've just done, you'll love it. So first, open up the web browser refresh. There you go. We've got our new navbar with our menu button. You've probably seen this before I guarantee if you're here coding, you must have seen this on application websites, etc.

Most miles me thinking, where's the navbar? Gone? Again, it's collapsible, it's hidden. So if we click on that, okay, clearly didn't work. So let's go back and have a look where we've messed up where I've messed up basically, so so so so we have a navbar. We have an ID or not On your data dash, target.

Now one, there we go, we need to put a hash on there. Because by default, it doesn't know that you're targeting and ID. So if we refresh, click it now, and as you can see, it opens. And when I click it closes, and as you can see, it's also very cool animation. So it's just sliding instead of just suddenly and abruptly appearing. So that's collapsible content with your navbar.

If you have any questions on this or anything else, feel free to post them on our education platform sonar learning Dakota, UK for slash question dot php, there'll be a link in the description. There'll be another link in the description to the source code from this video. Please rate, comment, and subscribe and let us know what you think of 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.