Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress WordPress Theme Development Building Out WordPress Navigation The wp_nav_menu Function

Gabriel Ward
Gabriel Ward
20,222 Points

menu icon on homepage

I follow the info presented about creating the menu and all the buttons/links on it. But what I'm trying to work out is how the menu icon (the three horizontal bars) at the top of the homepage in the right hand corner, is created. Where is it in the code? I've had a look through the html files and can't see anything about a button.

Any help/guidance on this would be greatly appreciated.

Agustin Grube
Agustin Grube
39,278 Points

CSS creates that button. JavaScript controls the integration. You will find the code in the project files in Styles.css.

Gabriel Ward
Gabriel Ward
20,222 Points

Ok great, thanks Agustin. I see that the button has the class 'nav-toggle', would you be able to enlighten me a bit more as to how it appears on the page? I know it's to do with the before and after pseudo classes, but I'm a little unsure how the whole thing works. I've seen this before in the CSS Foundations course I took. But this seems a bit more complicated. Any help with this would be greatly appreciated.

Thanks, Gabe

3 Answers

Agustin Grube
Agustin Grube
39,278 Points

CSS creates that button. JavaScript controls the integration. You will find the code in the project files in Styles.css.

Agustin Grube
Agustin Grube
39,278 Points

The appearance is the JavaScript part. Once you hit the button, the Javascript activates. What do you what it to do?

Also, leaving the "Hamburger" icon on the right side is best. Most people are right handed and use the mouse with the right hand or have the right hand available using a mobile device. It's better for the hand to go up the page to the right corner and not across the device. On the desktop, it's also easier to up the page on the right side and not across the page.

Gabriel Ward
Gabriel Ward
20,222 Points

Ok, I'm just slightly confused about where the hamburger icon comes from. I can't see any img url or anything. Though I was reading about how you can create shapes entirely with :before and :after pseudo classes, without any kind of img file. Is this correct?

Agustin Grube
Agustin Grube
39,278 Points

You can search foundation.css file for .menu-icon to learn more.

Yes, CSS can do amazing things. It's come a long way and it well be doing more soon.

Also, as soon as you can (as in now), take the course call "Website Optimization" in Development Tools. It's a misnomer because it's really about Chrome Dev Tools. If you want to see how something works or what CSS was used or were the code is in the file structure, this is the tool to use. Here is the description of the course:

"The Google Chrome web browser includes a built in set of features for web designers and developers called the Chrome DevTools. Using the DevTools, any webpage can be inspected for bugs and profiled on a number of performance characteristics. Some of the most powerful panels in the DevTools include the Elements panel which allows for interaction with DOM tree and styling, as well as the Console panel, which makes it trivial to access JavaScript functions and test out new front-end code."

I use it all the time. Also, my site is not in Foundation, so it's an image file. More that one way to do things.