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
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
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!
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
Thank you again and wish you well.
Warm regards,
kurukukuk
@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 
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!
Hello there,
Do you have a link to your website you could share here to allow to inspect and troubleshoot it directly?
Regards,
Kharis
Hi,
We did major JavaScript update in the newer version of Sydney theme.
I noticed you’re running a child theme, that might not able to adapt with this change. Can you try temporarily switching to the main theme, Sydney, for checking?
Further adding, can let me know what you’re doing with your child theme?
Regards,
Kharis
aThemes Support
Thanks for the response. We are trying to switch to the main theme. Having to re-work some of the menu. The child theme was created several years ago, not by me, so not sure it’s purpose is still relevant.
Hi,
Thank you for updating me.
Can you try reinstalling the Sydney theme by switching to one of default WordPress themes, removing Sydney, searching for Sydney, installing and enabling it, and checking the mobile menu?
Then, if you still want to use the child theme, try enabling and checking the mobile menu again.
Regards,
Kharis
aThemes Support
Thanks for your help! It’s working!
You’re welcome!
Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.
Regards,
Kharis
aThemes Support