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
Liz Karaffa
17,576 PointsMain Navigation within a "Burger" or Icon
I'm trying to have my main navigation be an overlay when I click on either a burger icon or a word. See http://www.hugeinc.com to get an understanding of what I'm talking about.
How would I go about building this in Wordpress since the default is a horizontal <ul>
8 Answers
Matt JS
16,510 PointsHi, I have done this a few times and have done a similar thing in wordpress. It is not that easy to do if you are not familiar with how to add a menu to a custom template, CSS3 transitions and a bit of JavaScript / jQuery but I will explain briefly below.
The overlay is just a background colour using rgba() as the colour value and an opacity on the colour. The actual wrapper for the overlay or the menu could be achieved by positioning the menu off the page and then transitioning the menu in using CSS3 transitions and a bit of jQuery for the menu click trigger which would initiate the transition.
Sorry if that sounds a bit vague but it would take a bit of code to achieve what they have done. I did a similar thing on my site but did not use an opacity setting on the background which you can see using the menu here: http://www.digitalpod.co.uk
Kevin Korte
28,148 PointsYou'll want to look at this article: http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/
Only your button would be a menu icon, not a button in the center of the screen.
Liz Karaffa
17,576 PointsThanks Kevin! That's great CSS and I'll definitely utilize it. What I really don't know where to start is how to get at the menu within Wordpress to change it from the default into my custom menu.
Kevin Korte
28,148 PointsThis function http://codex.wordpress.org/Function_Reference/wp_nav_menu is where you can build a completely custom menu that still connects with the menu builder in the WP admin page. Does that help?
Liz Karaffa
17,576 PointsThanks Kevin, I'm still trying to tackle having the codex work for me. I'm new enough to programming that I get really lost when I look at the codex. It's like I'm seeing individual puzzle pieces and I don't know how to put them all together. I recognize that this menu is a big undertaking. So thanks for the help!
Matt JS
16,510 PointsHi Liz, with regards to the menu, you will first need to enable custom menus in your functions.php file if you wish to use a custom menu. To do this add this code to your functions.php file for your wordpress theme:
// Enable custom menus add_theme_support( 'menus' );
This will enable wordpress to use custom menus. The next stage is to add a menu to the template or header (where you want the menu to be which will usually be the header unless you only need the menu on a certain page). To do this add this to your header of your theme:
<?php $args = array( 'menu' => 'main-menu' );
wp_nav_menu( $args );
?>
Please note that you will need to call your menu in word press main menu. You can call it anything but you would need to change the text that says 'main-menu' if you wish to call it something else.
Matt JS
16,510 Pointssorry some of the code has not displayed correctly as formatting changed after submitting.
Please make sure the add_theme_support ('menus');
is on a new line or it will just be part of the comment which will not work.
Liz Karaffa
17,576 PointsOk so I'm using _s theme as a template to build my theme. In the functions.php file they don't have add_theme_support( 'menus' ); but I just added it about the register_nav_menus like so... (oh ignore their comment, I haven't done anything with the secondary menu I added as that is down the road)
// Enable custom menus
add_theme_support( 'menus' );
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'main-menu' => __( 'Main Menu', 'garden' ),
'secondary' => __( 'Secondary Menu', 'garden' ),
) );
Then in my header.php the markup I have that is currently displaying the horizontal ul list of nav items is this:
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Main Menu', 'garden' ); ?></button>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'garden' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</nav><!-- #site-navigation -->
Matt JS
16,510 PointsOne more thing when you say horizontal menu, this is just css as the list items are displaying inline so just change the list items using css to make the menu list vertically.
Liz Karaffa
17,576 PointsRight, I know how to make it go back to vertical, but I want the header to be the logo on the left, and then on the right side the word "Menu" and when you click on menu, an overlay with the vertical ul to show up. How do I get it to just say Menu and then open up the ul?
Matt JS
16,510 PointsHi, I am not to sure as I cannot actually see your site?
If you use tutorial referenced by Kevin above and the wordpress code that I provided (all the code I have listed is covered in the wordpress tutorials on treehouse in more detail) this should all work but if you are using an existing theme then you will need to ask the theme developer as they might have added something that will cause issues due to the theme being intended to function in a different way.
There is a tutorial on treehouse that will teach you how to build a wordpress theme. You could then incorporate the tutorial that Kevein referenced and this would give you the menu you wish to see in your own wordpress theme.
Matt JS
16,510 PointsHi, I am not to sure as I cannot actually see your site?
If you use tutorial referenced by Kevin above and the wordpress code that I provided (all the code I have listed is covered in the wordpress tutorials on treehouse in more detail) this should all work but if you are using an existing theme then you will need to ask the theme developer as they might have added something that will cause issues due to the theme being intended to function in a different way.
There is a tutorial on treehouse that will teach you how to build a wordpress theme. You could then incorporate the tutorial that Kevein referenced and this would give you the menu you wish to see in your own wordpress theme.
Liz Karaffa
17,576 PointsThanks Matt, I've done all WP courses on treehouse. I must just be missing a piece that's obvious. _s is a starter theme/framework like bones or foundations so I don't think it should be messing with my ability to make a custom nav. I get that it's really hard to help without seeing the site but unfortunately I'm developing it locally so I can't share it. I appreciate all your help. I'll just try digging into the codex some more to see if I can figure it out. :)
Liz Karaffa
17,576 PointsLiz Karaffa
17,576 PointsThanks Matthew! Sorry I wasn't super specific in my description. I'm pretty confident in the CSS needed and could work in the JS/jQuery, but I guess the part I'm not sure about is how to get the menu into a custom template. I've built several custom templates for different pages that I'm working on, but I've never done anything with menus. So I just need to figure out where in WordPress I need to dig around/create to get the nav from the default horizontal list into a subnav.