Hamburger menu not working in 2.3 [RESOLVED]

whu606

The hamburger menu doesn't seem to be working.

Clicking on it returns 'Page not found'.

Any ideas?

Thanks.

whu606

It also looks like the edit cog wheel isn't responding.

vrijvlinder

It might help to change this in the custom.js it fixes the Hamburger menu issue

jQuery(function ($) {

to this 

jQuery(document).ready(function($) {

Then you must change some CSS because the menu items ul is also hiding . That is why the cog does not seem to work. It works but css is blocking the drop down from view.


Remove the !important from all of it, there are two in the custom.css file

Also remove , overflow:hidden  from this line 

.ToggleFlyout {
    display: inline-block;
     overflow: hidden; 
}

whu606

Thanks very much, @vrijvlinder.

I'll try that tomorrow.

whu606

Thanks for looking at it, @Vrijvlinder, but that doesn't seem to change anything.

The theme works fine in Vanilla 2.2, so I assume that there is an issue with 2.3, possibly in the themehooks.

vrijvlinder

I'm using 2.3 , with the changes I made it worked for me.

whu606

Thanks for replying, @vrijvlinder .

I'll download a fresh copy, make the changes and see if that does the trick.

whu606

Problem resolved with those changes, @vrijvlinder

Thanks very much.

The 'page not found' issue was down to one of my plugins, although I don't know why it should affect the theme, as it is not set to mobile friendly and shouldn't appear in mobile themes.

It didn't affect the theme in 2.2.

In 2.3, without the plugin enabled, /#menu is appended to the address, and the categories slide into view.

localhost:122/vanilla2.2/#menu

With the plugin enabled it appends the site/folder name:

http://localhost:122/vanilla2.2/vanilla2.2/#

whu606

Resolved by changing my opening line in .js file from

$(document).ready(function(){
to

(document).ready(function($){

vrijvlinder

You should define it as jQuery to avoid undefined issues. The problem you had could be retaliated to that .

jQuery(document).ready(function($){

whu606

Thanks @vrijvlinder

I got it working by moving the initial $ to the brackets, but I've added jQuery now as well.

Thanks again for your help; I and my mobile users are very grateful.

vrijvlinder

You are very welcome , I found this issue a while back trying to resolve similar problems with my own plugins. Then I applied it to other plugins and themes that were causing similar issues and was fixed after that. Found out that it is better to define it rather than just use the $ function . Since using the function alone without defining it is jQuery can be misinterpreted by the browser . Specially if the jQuery uses the jQuery UI . Such as the hamburger menu or scrolling.

Glad you sorted it out.

vrijvlinder

@whu606 said:
With the plugin enabled it appends the site/folder name:

http://localhost:122/vanilla2.2/vanilla2.2/#

If you show me that plugin, I can tell you what causes that double thing.

I had this happen too but only in installations in a subdirectory, the problem does not happen when in the root.

It has to do with how urls are written for example

src="images/xxx.jpg"   will cause a double of the directory name if in a subdirectory

but

src=".'Url(images/xxx.jpg)'." then it works like a charm.