Hamburger Menu still not working after update

Hi @tomp1495,

I am sorry for the long delay.

I just made a plugin specifically for this kind of issue to make the process simpler.

Please download the plugin package from GitHub and install it to your site via plugin uploaded under Dashboard > Plugins menu. Activate. Remove any additional code for your old customized mobile menu. Clear cache and reload your page.

Before doing so, full site backup maybe worth-trying to avoid any further trouble when additional code removed.

Let me know how it goes.

Regards,
Kharis

Hey @kharisblank !

I downloaded, installed and activated your plugin, but the desktop hamburger menu is still not doing anything at all..
I also removed the custom Java code and deactivated the java script plugin.

Thank you for trying @tomp1495!

Please edit sydney-mobile-menu.php (plugin file). And replace #primary-menu with #menu-menue. Update and clear cache.

Let me know whether it works or not.

Regards,
Kharis

Hey @kharisblank

I updatet the php File like you said, and now there is a new Hamburger button on the top left corner of the homepage…

I could remove the original hamburger from the page, i just left it there for now because its easier to explain what i want..

As you can see, the new hamburger is really in the corner of the screen.. is there a possibility to move it to the position of the old one ?
Also in the mobile version i have 2 working Hamburgers now.. would be great to deactivate one or the other… would be also fine to only use the new hamburger on the desktop version and the original old one on mobile versions.

Is it also possible to make the Hamburger icon bigger and without a background?
Also the area that pops up, after klicking on the hamburger could be a bit bigger and with a black background with less opacity. ??

One thing i also found out is, that the new hamburger is not following when you scroll down the page… could we change it, so it stays on the top left corner ?

Thanks for your awesome support, i really appreciate it !

Greets!

Hi @tomp1495,

You can hide the old menu by adding this CSS code to Additional CSS.

.site-header .btn-menu {
   display: none !important;
}

For other styling concerns, I’m currently working on this. I’ll keep you updated.

Regards,
Kharis

Hi @tomp1495,

I just updated the plugin to include additional styles per your request.

https://github.com/kharissulistiyo/sydney-mobile-menu

Do not forget to apply this change again: https://www.ads-software.com/support/topic/hamburger-menu-still-not-working-after-update/#post-15270383.

Regards,
Kharis

Hey @kharisblank

Thanks for your work so far! The Hamburger actually works how it should..

May i ask you to do some more changes for me ?

1. I found out, that when you scroll on step down, the hamburger opens a black bar under itself.. this looks like a bug somehow.. can you fix it ?

2. Can you remove the underline of the Text inside the opened Menü and make the text a little bit bigger?

3. i would like to have no background or Hover on the Hamburger itself.. max a Hover on the 3 white lines.. but no background.. is this possible?

4. The Hamburger and menu is still very far in the top left corner… i would like to have it a bit more at the position of the original hamburger of the sydney theme… if thats possible it would be very nice ??

Thanks so far, and i hope you can help once more !

Greets !

Thank you for getting back @tomp1495!

Let’s address them one by one to help us track progress easier.

1. I found out, that when you scroll on step down, the hamburger opens a black bar under itself.. this looks like a bug somehow.. can you fix it ?

Perhaps your current custom CSS code applied for site header is needing some corrections for this.

Can you share your cutom CSS code (under Appearance > Customize > Additional CSS) here?

Regards,
Kharis

Yeah sure…

Here is the Custom code of the css:

/* HP Name nicht anzeigen*/
.site-header .col-md-4 {
	display: none;
}

/* Alten Hamburger nicht anzeigen*/
.site-header .btn-menu {
   display: none !important;
}

#mainnav {
  display: none;
}

/* Alter Menü Hamburger*/
.btn-menu {
  display: block !important;
	position: relative;
	float: left;
}

.container {
	width: 90%;
}

@media (min-width:992px) {
	.col-md-8{
		width: 15%;
	}
	}

#masthead.site-header.float-header {
    background-color: transparent;
}

#masthead.site-header{
    background-color: transparent;
} 

 .button-tour .roll-button {
      background-color: transparent;
      color: #fff;
    }

    .button-tour .roll-button:hover {
      background-color: rgb(64,0,3,0.8);
      color: #fff;
    }

 .button-merch .roll-button {
      background-color: transparent;
      color: #fff;
    }

    .button-merch .roll-button:hover {
      background-color: rgb(0,0,0,0.7);
      color: #fff;
    }

a:hover{
	color: rgb(255,255,255,0.4);
}

a:link{
	font-weight: bolder;
	text-decoration: underline;
}

.picwithlink:hover{
	opacity: 0.6;
	transition: .5s ease;
}

.button-merch .roll-button:link{
	text-decoration: none;
}

.button-tour .roll-button:link{
	text-decoration: none;
}

/*Originalfooter von Sydney ausblenden*/
.site-footer{
	display: none;
}

/*Footer nach unten fixieren*/
.futter{
	position: fixed;
  width: 100%;
  bottom: 0;
}

/*Footer auf Mobile NICHT fixieren*/
@media (max-width: 780px){
	.futter{
		position: static;
		width: auto;
	}
}

/*About us pics MOBILE in einer Reihe*/
@media (max-width: 780px){
	.mobilerow{
		flex-direction: row !important;
		font-size: 2vw;
	}

	.mobilerow .panel-grid-cell{
			width: 20% !important;
      padding-left: 3px !important;
      padding-right: 3px !important;
	}
}

/*Mobile footer in einer Reihe*/
@media (max-width: 780px){
	.mobilerowfooter{
		flex-direction: row !important;
		font-size: 3vw;
	}

	.mobilerowfooter .panel-grid-cell{
      padding-left: 2% !important;
      padding-right: 2% !important;
	}
	.futtertext{
		padding-top: 3%;
	}
}

/*Download Page PW Background transparent*/

#pwbox-1308{
	background-color: transparent;
}

.reply, .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .project-filter li a.active, .project-filter li a:hover, .preloader .pre-bounce1, .preloader .pre-bounce2, .roll-team .team-item .team-pop, .roll-progress .progress-animate, .roll-socials li a:hover, .roll-project .project-item .project-pop, .roll-project .project-filter li.active, .roll-project .project-filter li:hover, .roll-button.light:hover, .roll-button.border:hover, .roll-button, .roll-icon-box.white .icon, .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span, .go-top, .bottom .socials li:hover a, .sidebar .widget:before, .blog-pagination ul li.active, .blog-pagination ul li:hover a, .content-area .hentry:after, .text-slider .maintitle:after, .error-wrap #search-submit:hover, #mainnav .sub-menu li:hover > a, #mainnav ul li ul:after, button, input[type="button"], input[type="reset"], input[type="submit"], .panel-grid-cell .widget-title:after {
    background-color: transparent;
}

I added a new menu part for a STORE and the hamburger completely disappeared and shut down.. might be a problem with the plugin…. i took the hamburger out for now.. but could you fix that issue ?