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

CSS

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

How to create a menu bar for mobile viewport

    <div class="main-header">
    <header>
      <a href="#"><img src="img/menubar.png" class="menu"></a>
      <img src="img/Logo2.png" alt="Logo" class="logo">
      <ul>
        <li>Home</li>
        <li>Display</li>
        <li>Camera</li>
        <li>Performance</li>
        <li>Battery</li>
        <li>Specs</li>
      </ul>
      <h4 class="buy">Buy Now</h4>
    </header>
  </div>

I am trying to hide the li items inside of the class menu. It has a menu bar image. I am using the mobile first approach and I thought maybe for mobile viewports I should make a menu bar pop up, and within that menu bar have all the nav/li items drop down once you click on the menu bar. And I'll have the menu bar disappear in wider viewports once I begin with media querries. I looked at a tutorial on youtube but it didn't work for me, basically a turned the menu bar into an li item within a ul item, then I nested the ul li items within the new ul li. Then did some css, but the results were way far off. Please help!

I'm kind of trying to do what treehouse has done with their website, when it's in a desktop viewport, the nav bar displays all the nav items side by side, but once you shrink the browser down to mobile viewport, a menu bar at the left corner of the header appears, the nav items disappear and are only visible once you click on the menu bar and get displayed as block items rather than inline or inline-block. How do I do this??

2 Answers

Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

First of all I think put anchor tags btwn list the after opening and closing ul put nav tags . Then use pseudo class hover to do it .

<div class="dropdown>
<button class="dropbtn >Dropdown</button>
<ul dropdown-content>
<li><a>Home</a></li>
<li><a>Display</a></li>
<li><a>Camera</a></li>
<li><a>Performance </a></li>
<li><a>Battery</a></li>
<li><a>Space</a></li>
</ul>
</div>

style it with CSS then change it on hover 

.dropdown-content:hover{
background: red;
}
.dropdown, dropdown-content: hover{
display: block;
}

That's my example you can do a lot things . I hope that helps

Luqman Shah
Luqman Shah
3,016 Points
Luqman Shah
Luqman Shah
3,016 Points

It did not work:

<div class="main-header">
    <header>
      <!-- <a href="#"><img src="img/menubar.png" class="menu"></a> -->
      <img src="img/Logo2.png" alt="Logo" class="logo">
      <botton class="dropbtn"><a><img src="img/menubar.png" class="menu"></a></button>
      <ul dropdown-content>
        <li><a href="#">Home</a></li>
        <li><a href="#">Display</a></li>
        <li><a href="#">Camera</a></li>
        <li><a href="#">Performance</a></li>
        <li><a href="#">Battery</a></li>
        <li><a href="#">Specs</a></li>
      </ul>
      <h4 class="buy">Buy Now</h4>
    </header>
  </div>

.dropdown-content:hover {
  background: red;
}

.main-header, dropdown-content: hover {
  display: block;
}
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points
Abdullahi Abdinasir Ali
Abdullahi Abdinasir Ali
9,520 Points

U need give styling before you do the hover pseudo class . Give the class color,background, and others then do the hover pseudo class. Hope that helps