Menu implementation

Hello,

I see, from your profile, that you’ve been here since 2009…
Since you are using _s, I assume that you know how to develop…
Tell me what you did till now and I’ll help you get it to work.

SYA ??

Hi,

Yes, I know how to develop on a basic level, but I’m a designer. Tech savvy, not so much. But, I read every bit of code that’s part of my theme so I can learn and understand.

OK, so in my workflow, configuring the menu is something I do right after I’ve set up style.css, functions.php, fonts, styling the header, etc. So, I have not yet implemented any of the HugeInc menu code, just read through the code (index.html, style1.css, classie.js, demo1.js). Also, I understand that the modernizr.custom.js is necessary. My theme is responsive, one-column, 100% width, has a standard header with a logo on the left and the _s dropdown menu to the right. The goal is, on small screens, to have a hamburger menu icon to the right instead of the _s button. And that’s how far I’ve got.

This is my first time around with mobile menus, and I find it kind of daunting to implement all this in the _s navigation.js, style.css and functions.php. Stumped, to say the least.

I hope you don’t feel I’m trying to exploite your hard earned knowledge. I’m prepared to pay for it. Seriously.

Thank you so much for taking the time.

J

Hello,

I’ll get back to you today.
Two questions :
1- Is your site local or live ?
2- If your site is local, can you send me a link to download your theme ?
(I assume that you have done a lot of css changes…)

Waiting for your link

SYA ??

Hello again,

First of all, it’s not allowed to hire, pay, or ask for a job here.
Offering to Pay
If you really want to hire me or another developer to get the job done,
you can do it on WP Jobs.

All that said, I’m going to help you get the menu to work, nothing more.
You’ll have to style it as you feel and need, debug according to your theme if any bug/conflict…

1- Download FullscreenOverlayStyles, I named it fos.zip, extract it and place the fos folder at the root of your theme (at the same level as your main style.css file).

2- In your function.php file, place this code

function fos_scripts() {
wp_enqueue_style( 'fos-norm-style', get_template_directory_uri() . '/fos/css/normalize.css', array(), '' );
        
        wp_enqueue_style( 'fos-style1-style', get_template_directory_uri() . '/fos/css/style1.css', array(), '' );
        
        wp_enqueue_script( 'fos-classie-js', get_template_directory_uri() . '/fos/js/classie.js', array( 'jquery' ), '', true );
        
        wp_enqueue_script( 'fos-demo1-js', get_template_directory_uri() . '/fos/js/demo1.js', array( 'jquery' ), '', true );
        
        wp_enqueue_script( 'fos-modern-js', get_template_directory_uri() . '/fos/js/modernizr.custom.js', array( 'jquery' ), '', false );
}
add_action( 'wp_enqueue_scripts', 'fos_scripts' );

3- Since your using _s, go to header.php
line 43 remove class=”main-navigation”
line 45 replace the whole line by
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'container' => '' ) ); ?>

4- You should wrap the <nav> with a <div class=”overlay overlay-hugeinc”> and add just before the <nav> the cross button to close the menu, your code should look something like

<div class="overlay overlay-hugeinc">
 <button type="button" class="overlay-close">Close</button>
 <nav id="site-navigation" role="navigation">
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'container' => '' ) ); ?>
 </nav>

5- Finally, you’ll have to put the trigger button at the place of your choice
<p><button id="trigger-overlay" type="button">Open Overlay</button></p>

Now, happy coding and styling.

SYA ??

Hello,
sorry it took so long for me getting back to you.

I didn’t know about the rules and WP Jobs. Good to know. I have bookmarked WP Jobs and I will certainly remember to use it the next time I need extensive help with development.

I did what you wrote, and guess what, it worked. I suspect you knew that.
I will have to do some work to get the button/hugeinc menu to display only on small screens, so that on @media screen and (min-width: 50em) it will display the standard dropdown menu.

Thank you so much for helping out.

J

• This reply was modified 8 years, 1 month ago by Indent.