Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Ali Corlett
PLUS
Ali Corlett
Courses Plus Student 1,359 Points
Posted by Ali Corlett
Ali Corlett
Courses Plus Student 1,359 Points

Dropdown nav with bootstrap4 not displaying whole nav. Works with bs3 loaded but then carousel doesn't load properly.

Here's the head and body section to include the html for the nav section. I have added and removed several attempts at fixes, but my inexperience is making this problem difficult for me to solve. Can anyone share some help with what code is missing to make the dropdown appear and function properly please? Ali

Here's the html.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!--<meta name="description" content="Menopause symptoms and relief, Muumuu offers profesional advice and Menopause solutions">--> <meta name="robots" content="noindex, nofollow"/> <title>MuuMuu</title>

<!-- Favicons to get designed here--> <!-- BASE CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> <link rel="stylesheet" href="css/custom.css"> <link href="css/icon_fonts/css/all_icons.min.css" rel="stylesheet">

<div class="container p-t-2"> <!--header image--> <div class="row"> <div class="text-lg-center col-sm-12"> <div class="media"> <div class="text-lg-left"><a href="index.html"><img class="d-flex align-self-start mr-3 m-b-0" src="images_main/muustrapdg230x68.png" alt="Muumuu menopause logo image"></a></div> <div class="media-body"> </head> <body> <!-- nav --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

<div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <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="#">Features</a></li> <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>