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

Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Adding custom navigation menu on mobile and tablet version of the website.

Hi everyone,

I have a question with regards to responsive web design and Bootstrap framework. Long story short, I have designed a simple webpage in Sketch, which I would like to code now and make it responsive. Here is a screenshot of my Sketch high fidelity mockup: http://d.pr/i/17Ltv .

I have started coding the navigation bar for this page, and got to the point where I got really confused and can't figure my way out of it. To make my explanation easier to understand I have recorded a short video demonstration: http://d.pr/v/1h58s .

In short, I would like to have only 4 links in navigation menu in the Desktop version of the website, and I would like to have 9 links in my navigation menu (which should open when the "hamburger" icon is pressed). The Desktop navigation looks like so: http://d.pr/i/41Ha , whereas my mobile navigation page looks like so: http://d.pr/i/1hTiF .

In order to achieve the current effect I have used Bootstraps functionality which makes it easier to create collapsed navigation menus on mobile version of the website.

I was told by my friend that I need to somehow hide my desktop navigation menu on mobile version of the website and create a separate version of the navigation bar for mobile version of the website which will only be shown on extra small devices and will be hidden from small, medium, large and extra large devices (in Bootstrap).

Here is the code I have used in my html to create this "hamburger" icon, which when pressed opens up a menu with the same navigation links as the Desktop version of the website: 

<div class="container">
   <div class="row">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>

...
...
...


<div class="col-xs-4 col-sm-4 col-md-6 col-lg-5 pull-right">
   <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right main-nav-items">
         <li><a href="#">О компании</a></li>
         <li><a href="#">Услуги</a></li>
         <li><a href="#">Новости</a></li>
         <li><a href="#">Контакты</a></li>
      </ul>
 </div>

Any suggestions how can I add a completely different set of links for the navigation menu in my mobile version of the website as shown in my high fidelity mockup above?

Thanks in advance.

2 Answers

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

Have you tried having all the links present initially and having a "hide" class on the 5 you don't need on desktop view, then using a media query/breakpoint to "unhide" them?

Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hm, good advice. I haven't tried this method actually. But how can I have custom icons to appear next to the navigation links in mobile version of the website and have them hidden in the Desktop version? Maybe you could give a simple example?;)

Thanks.

Julian Gutierrez
Julian Gutierrez
19,325 Points
Julian Gutierrez
Julian Gutierrez
19,325 Points

You could also introduce the icons in a media query. This small example shows an image being shown at a width of 500px. I don't use bootstrap but there might be a class to show/hide on certain break points.

<ul>
    <li><a href="#"><img src="http://placehold.it/10x10" class="mobile-show">Menu 1</a></li>
    <li><a href="#"><img src="http://placehold.it/10x10" class="mobile-show">Menu 2</a></li>
    <li><a href="#"><img src="http://placehold.it/10x10" class="mobile-show">Menu 3</a></li>
</ul>

.mobile-show{
    display:inline;
}

@media screen and (min-width: 500px){
  .mobile-show{
    display:none;
  }
}
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hi Julian,

Thank you very much for your help! It worked, now I just need to style it appropriately using CSS. Awesome, thanks. No idea how this idea never approached me at the first place. By the way, if anyone will be searching for the way to hide/show certain elements using Bootstrap wireframe, there is an easy way to show/hide elements using pre-defined classes: http://getbootstrap.com/css/#responsive-utilities

Once again, thank you very much for your help!