domdomdom

got it sorted differently with this tutorial- in case someone gets stuck like me! – https://bhoover.com/simple-jquery-mobile-menu/
(didn’t de and re-register the jquery though)

Hi Andrew and other helpers! ??

So I’m back, soon finishing the website and the problem is, that the menu toggle doesn’t always work.. If you go here again, where I duplicated the menu and the problem, if you resize the window, or go on the phone, sometimes menu doesn’t open at all if I click on the menu-toggle button.. Any chance you can check what is the problem with it? Would really appreciate it!

I was also wondering if there’s something to add to the script so that the children items open up right underneath the parent item if the parent item is clicked on, pushing the rest of the menu items down? Because now it opens up floating, and in my original website I can’t click on any of the child menu items when visiting the site on the phone..?

Thanks a lot,
Dom

Here’s the mobile menu script I have that you gave me:

$ = jQuery;
var $windowWidth = $( window ).width();

$( document ).ready( function() {
	mobileMenu();
});

$( window ).resize( function() {
	$windowWidth = $( window ).width();
	mobileMenu();
});

function mobileMenu() {

	var $menu      = $( '#menu-menu-1' );
	var $toggleBtn = $( '.toggle-menu' );

	if ( $windowWidth <=768 ) {

		//Hide the menu
		$menu.hide();

		//Only add the toggle button if it doesn't exist
		if ( $toggleBtn.length == 0 ) {
			$menu.before( '<a href="#" class="toggle-menu"><span>☰</span></a>' );
		}

		//On click of the toggle button
		$toggleBtn.click( function() {
			//Show or hide the menu
			$menu.toggle();
		});

	}
        //If the window size is greater than your breakpoint
        else {

		//Show the menu
		$menu.show();

		//Hide the toggle button
		$toggleBtn.remove();

	}

}

And that’s how I enqueued the script in functions.php:

function wpb_adding_scripts() {
wp_register_script('small_menu', get_template_directory_uri() . '/js/small_menu.js', array('jquery'),'20120206', true);
wp_enqueue_script('small_menu');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Hi Andrew, yes the toggle works! – I copied the code from here before but it had entity names instead of symbols.
Toggle now works thanks so much! Just got to mess about with styling now- I’m working with media queries, is that the right way forward? ??
Thanks again ??

thanks,
i added toggle-menu class to header.php just after the assistive-text class:
<div class="toggle-menu"><?php _e( 'Main menu', 'twentyeleven' ); ?></div>
and pasted the code you gave me above into my small_menu.js file (is it okay to keep it under that name?- I just thought to keep the same name as I have already enqueued the script with that name)
I tried it both on the site that’s under construction and the duplicate site, but only “Main menu” is showing up.. did i add toggle-menu class element incorrectly?
Really appreciate you helping me! ??

I did try changing the id’s and class names but that was it.. Yup, here is the JS-less link. In the original site under construction menu is horizontal though and two items are on the left side of the logo, and two- on the right side, but just copying the style.css didn’t move that over.. but hopefully that’s not a problem for JS?

Yea it is different, but I thought that ‘addClass’ and ‘removeClass’ would still work the same way, i.e. remove classes that are in the html code, and add the ones that aren’t? Cazuela theme above uses small menu and I use their small-menu.js script and they don’t seem to have small menu classes in their general html markup? Or am I getting it all completely wrong?

Hi Andrew,
I’ve been looking into adding class element that jquery is targeting and am a bit lost- i looked at html & source code of cazuela theme demo, and this fiddle and it doesn’t look like either of them have elements in their html that jquery is targeting.. (in jsfiddle there’s no ‘open’ class in the html, only in javascript and css) Cazuela picks up the class when the screen is smaller, but doesn’t address it in general html markup (or I can’t find it). I thought that jquery adds the class and then I can shape & style class element in css.. or am i missing something big time?…

Thanks, I’ll try to work on it now that I know what I’m missing, you’re a star, thanks again! ??

Hi Andrew! Thanks a million for replying ??
I found it online so didn’t have anyone to speak about it to.. I first used Cazuela theme’s small-menu.js and their jquery call (I worked with Cazuela before and liked small-menu), then searched other themes using this small-menu.js trying to find where I was failing, and in the end the code I’ve used last (and above) was from this support forum topic as the person said it had worked for him..
Could you tell me where I should add “menu-toggle” class element?
EDIT: do I add it to html header.php after navigation and call wp nav inside it?…

Hi, could anyone give me a helping hand with this problem above?.. thanks :}

HI sorry Andrew for late reply- didn’t see your message! Thanks a lot for this, really appreciate your help! ?? D

Hi Andrew- thanks for help. I’ve tried that to no avail. Someone helped me yesterday to sort it out by adding classes to each menu item. Phew, it finally works ??

Hi! Hi again ??

After a few (5) days of trying to work out this horizontal menu problem of mine, reading numerous sources online etc etc etc, I still can’t work out where my problem lies of not being able to make my submenu horizontal & centred under it’s parent…

I managed to recreate the problem in cssdesk–>

Here’s my HTML and my CSS:
https://cssdesk.com/r7gZf

And here’s my HTML and Cazuela theme’s CSS, in case I’m missing something in this CSS that’s causing my despair..?
https://cssdesk.com/Th9E9

Thanks for all your help. If someone can help me solve this problem, it would made my day, and probably, my week too ??

Thanks in advance,
Dom

Hello Slobodan,

Ok, I’ll try again and be more precise.

I made my body & #main 100% wide. This attached left sidebar right to the left edge of the screen, so I tried increasing margin e.g.

from
.layout-pcs #secondary { width: 22%; margin: 0 0 0 -100%; }

to

.layout-pcs #secondary { width: 22%; margin: 0 0 0 -98%; }

that messes up the website being responsive and the left sidebar completely disappears once the screen gets smaller..

Could you please tell me what I’m doing wrong?

Thanks

cool thanks for your help I’ll check it out! I don’t know where to go for css help though as i dont get questions answered in couple other forums i tried, and wordpress support forums seem to have quite a lot of css related discussions.. but thanks anyway Jose for checking out, really appreciate it! ??