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
Unsubscribed User
6,510 PointsHelp with Hamburger Menu in Mobile
Hi, kindly assist me on my personal project at http://cutby.me. It has to do with making the hamburger menu sit inline with the main menu, preferably to the right of the logo on mobile screens?
Could you please help with code or direct me where to customize.
I'm working with an html template called Neue that I bought from Themeforest from an author called AetherThemes.
4 Answers
Robert Araujo
Courses Plus Student 2,222 PointsAdd this to your css sheet.
@media only screen and (max-width: 959px) and (min-width: 768px)
.container .sixteen.columns {
width: 748px;
text-align: right;
}
Robert Araujo
Courses Plus Student 2,222 PointsI'll get back to you on this but usually doing text-align:right works
Robert Araujo
Courses Plus Student 2,222 PointsLook at my screenshot
Unsubscribed User
6,510 PointsInteresting, and I'm impressed you could bring up a screenshot. You see that menu bar, with the icon? Time kills me but I've trying to figure out where in the code it resides. I don't exactly want that additional bar. I want the menu icon to sit to the right of the nav bar where the logo is. I hope you understand. Thanks a lot for taking the time to assist, I really appreciate. Thanks.
Robert Araujo
Courses Plus Student 2,222 PointsYou need to add your logo to the mobile nav section, right now it isn't there, take a look a this code.
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
also check this page out: http://getbootstrap.com/examples/navbar-fixed-top/ and look where it says Project name that's where you have to add your logo.
Hope this helps.
Unsubscribed User
6,510 PointsI need plenty of time to digest this and see if it works. Thanks. I'll get back. Thanks very much, okay?
Robert Araujo
Courses Plus Student 2,222 PointsIt can be frustrating at times but take a look at this site for more details: http://getbootstrap.com/components/#navbar
Alexandra Cianciara
2,465 PointsCan anyone send super simple instructions what html, CSS and JS to add. I'm really struggling to build it. Can any teacher please help?
Thank you
Unsubscribed User
6,510 PointsUnsubscribed User
6,510 PointsThanks, Robert, I'll try it and see if it works. I'll get back to you. Might take longer, since I'm taking the week off to work on a new WordPress project for a local client.
I really appreciate your help. Just later. Thanks.
Robert Araujo
Courses Plus Student 2,222 PointsRobert Araujo
Courses Plus Student 2,222 PointsNo worries :)
Unsubscribed User
6,510 PointsUnsubscribed User
6,510 PointsJust tried this, didn't work. If you view cutby.me on mobile, the sticky navigation header above where the logo sits looks like some javascript coding, it just looks extraneous.
My intention is to bring this mobile hamburger nav inline with the logo header area, and toward the right. Looks like I need more training here to achieve that. Hoped a friend would help me there faster, though.