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

Mark Lawson
6,148 PointsNav-brand overlapping collapsed menu is mobile view
Once I place the navbar into container, it responds okay until you view in mobile view. The nav-brand and collapsed menu overlap. Can anyone assist please?
Thanks

Mark Lawson
6,148 PointsThis is the code. If I place the main nav into the container as in the video; when I view in mobile mode, the nav-brand overlaps the collapsed menu.
<!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"> <title>Full Stack Conf</title> <!-- bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head> <body>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<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">
<a class="nav-link" href="#">Disabled</a>
</li>
</ul>
</div>
<a class="navbar-brand float-xs-left" href="https://teamtreehouse.com">Presented by Treehouse</a>
</nav>
<!--Navbar-->
<!--Jumbotron-->
<div class="jumbotron jumbotron-fluid bg-info text-white">
<div class="container text-center pt-3">
<h1 class="display-2">Full Stack Conf</h1>
<p class="lead">A One-day Conference about all things JavaScript!</p>
<div class="btn-group mt-2" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary btn-lg">Register Now</button>
<a class="btn btn-secondary btn-lg" href="#speakers">See Speakers</a>
</div>
</div>
</div>
<!--/Jumbotron-->
<div class="container mt-2">
<!--About-->
<div class="row">
<div class="col-md-4 push-lg-4">
<h3 class="mb-2">About Full Stack Conf</h3>
<img class="mb-1 img-fluid rounded mx-auto d-block hidden-xs-down" src="img/pdx.jpg" alt="Portland" />
<p>The beautiful city of Portland, Oregon will be the host city for Full Stack Conf!</p>
<p>Explore the future of JavaScript with a lineup of industry professionals. Discover new techniques to advance your career as a web developer.</p>
</div>
<div class="col-md-4 pull-lg-4">
<h3 class="mb-3">Expert Speakers</h3>
<p>Our expert speaker lineup was just announced, so don't wait too long before grabbing your tickets!</p>
<p>Want to meet the international JavaScript community and share skills with some of the world's top experts, hackers, and makers? Be the first to know what to expect for the future of JavaScript.</p>
<p>Full Stack Conf is committed to being inclusive and welcoming for everyone. We look forward to another intensive day of learning and sharing.</p>
</div>
<div class="col-md-4">
<h3 class="mb-2">What You'll Learn</h3>
<ul>
<li><strong>MongoDB</strong>: NoSQL database</li>
<li><strong>Angular</strong>: JavaScript framework</li>
<li><strong>Express</strong>: Framework for Node</li>
<li><strong>Node.js</strong>: JavaScript environment</li>
<li><strong>ES2015</strong>: Latest version of JavaScript</li>
<li><strong>Babel</strong>: JavaScript compiler</li>
</ul>
</div>
</div><!--/About-->
<!--Speakers-->
<h1 id="speakers" class="display-4 text-center my-3 text-muted">Speakers</h1>
[Speaker Bios Go Here]
<!--Schedule-->
<h1 class="display-4 text-center my-3 text-muted">Schedule</h1>
[Conference Schedule Goes Here]
<!--Callout Button-->
<button type="button" class="btn btn-outline-info btn-lg d-block mx-auto my-5 my-3">Don't Miss Out, Register Now</button>
<!-- signup form -->
<hr>
<div class="row py-4 text-muted">
<div class="col-md-6 col-xl-5">
<p><strong>About Treehouse</strong></p>
<p>Treehouse brings affordable technology education to people everywhere to help them achieve their dreams and change the world.</p>
</div>
<div class="col-md-6 col-xl-5 offset-xl-2">
<p><strong>Stay up-to-date on Full Stack Conf</strong></p>
<div class="input-group">
<input type="text" class="form-control" placeholder="Email">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Sign up</button>
</span>
</div>
</div>
</div>
<hr><!-- /signup form -->
<!--Footer-->
<div class="row py-3">
<div class="col-md-7">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="col-md-5 text-md-right">
<small>© 2016 Full Stack Conf & Treehouse</small>
</div>
</div>
<!--/Footer-->
</div><!--/container-->
<!-- jQuery first, then bootstrap js -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body> </html>

Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsHmm it's not overlapping for me?

Mark Lawson
6,148 PointsIt doesnt overlap until you place it into a container. Then it overlaps in mobile view. He places the nav bar into a container so the nav bar info is inline with the info on the page.
1 Answer

Liam English
3,837 PointsHiya,
This is maybe not the ideal solution to your problem but you could always resize the .navbar-brand text with a media query like so:
@media (max-width: 320px) {
.navbar-brand {
font-size: 0.8em;
padding: 10px 0;
}
}
This will shrink your brand text slightly at a small screen size, preventing any overlap.
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsChris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsCan you provide any more context? Is this in regards to a course challenge, your own code, etc?