[francisco.brito]

Hi,

I’m currently developing a new WordPress website for my company using the Arkiz theme. I’m working locally first, since the old website is still online. Overall, I really like the theme, but I’ve recently run into a problem with the mobile menu.

I wanted to adjust the spacing of the logo and the hamburger menu in the mobile header. Specifically, I added some left/right margin to the logo and the hamburger icon so the logo sits more to the left and the hamburger menu more to the right.

After doing this, the mobile menu started behaving strangely: when I click the hamburger icon, the menu opens, but its background is transparent instead of white (as it was before). This makes the menu unusable.

I assumed margin changes shouldn’t affect the background of the mobile menu. To troubleshoot, I removed the custom CSS margins I had added, but the problem still remains. I also tried directly setting the background color of the menu to white in CSS, but it didn’t solve the issue either.

Could you please help me figure out what’s causing this and how I can restore the mobile menu background to white? I’ve attached a screenshot for reference.
https://ibb.co/qLcpqddk

Thanks a lot in advance!

[serkan]

Hi,
Could you please trey to use this custom css code;

@media (max-width: 991px) {
    .menu-toggle { float: right; margin-right: -20px; }
    .is-header-small .site-branding { left: -25px; }
}

Thanks

[francisco.brito]

Thanks a lot for the help, I tried your code and it didn’t solve the issue but after a bit I discovered what was causing the issue.

I was using the code:

@media (max-width: 767px) {
.header-wrap {
height: 60px !important;
}
}

For making the top nav bar on mobile shorter (60px), but this caused this issue of the background of the menu becoming transparent when open. I deleted this part of the code and now the menu background is white as I wanted. But still have a liuttle issue that would like you to help me.

Is there any way to only adjust the height of the top nav bar withouth hurting this? Right now as I deleted this code the nav bar has a bit more height than I would want, I want to set it to 60px but not affect the open menu.

Here is a picture of how it looks on mobile right now:

https://ibb.co/W4zwbDrv

Thank you.

[serkan]

Hi,
Could you please provide me your wp admin details via our private content box below?
Thanks

[francisco.brito]

Yes, I’m building this website locally using local-wp but I can give you the live link to see if you can access it.

Thank you.

[francisco.brito]

I was already able to solve this.

for now I don’t have more problems.

Thank you.

[serkan]

Hi,
Thanks for the feedback.
We’d be very happy if you can spare a minute to rate the theme on ThemeForest. Your feedback will boost our motivation and help us to work harder on future updates.

https://themeforest.net/downloads

Thank you for your support.