Mobile Menu>Home Page; Hamburger Button Not Working

Sydney
#1

Goodday Sir,

I got concerns regarding the hamburger button of the site i’m developing (tdpowersystem.com).

When using the mobile version:
The hamburger button is always visible.
On the homepage, the hamburger button does not display the drop-down menu.

If I navigate using the site’s URL, the hamburger button does work on other pages.

Thank you and goodjob on the Sydney theme.

kurukukuk

#2

Hello there,

The container element of the Rev Slider overlays the mobile menu area. That’s why the mobile menu isn’t working. To prevent it, you need to set higher z-index on mobile menu container. It can be accomplished by adding the below CSS snippet into your site’s additional CSS option (Appearance > Customize) or child theme’s style.css.


.site-header .col-md-8{
  position: relative;
  z-index: 999;
}

Regards,
Kharis

#3

You save me, thank you very much Kharis. And off-topic, any suggestions on how could I develop my skills on writing those codes? Any suggested topics on learning, I am a novice but is now assigned in maintaining the site. Thank you very much again!

#4

There numerous free resources out there that are easy to find, just google “CSS coding”. However, for better result, I’d recommend you learn on an online coding course like https://teamtreehouse.com or https://www.codecademy.com.

Regards,
Kharis

#5

Thank you again and wish you well.

Warm regards,
kurukukuk

#6

@kharisblank Different question but I figured your solution could have helped me as well, unfortunately it didn’t could you please help me too?

Seems that my hamburger button is not tappable (can’t access dropdown), as soon as I use it on any other page than Homepage (typically enough coming back to homepage, the button does not work anymore there either). Any thoughts on this?

Site is under htaccess at the moment so I won;t be able to share the url just yet, soon though :wink:

Custom CSS in place:

.text-slider .maintitle {
	font-size: 80px;
	font-family:arial, sans-serif;
}
.text-slider .subtitle {
	font-size: 40px;
}
@media only screen and (max-width: 767px) {
	.text-slider .maintitle {
		font-size: 50px;
	}
	.text-slider .subtitle {
		font-size: 26px;
	}	
}
@media only screen and (max-width: 479px) {
	.text-slider .maintitle {
		font-size: 26px;
	}
	.text-slider .subtitle {
		font-size: 15px;
	}	
}
.site-header.fixed.float-header {
	background-color: rgba(255, 255, 255, 1.0);
}
.btn-menu {
      color: #333333;
}

.site-header .col-md-8{
  position: relative;
  z-index: 999;
}

Additionally, changing the z-index on .site-header .col-md-8 create a background colour behind my menu items, how can I prevent this? Now I am not a front-end dev so excuses me if I am not making sense.

Many thanks!

#7

Hello there,

Do you have a link to your website you could share here to allow to inspect and troubleshoot it directly?

Regards,
Kharis