Mobile Menu turned transparent

  • Posted in : Arkiz
  • francisco.brito
    Participant
    12 September 2025 at 13:47
    #94864

    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
    Moderator
    13 September 2025 at 14:35
    #94877

    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
    Participant
    15 September 2025 at 19:04
    #94881

    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
    Moderator
    16 September 2025 at 15:29
    #94885

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

    francisco.brito
    Participant
    16 September 2025 at 17:42
    #94886

    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
    Participant
    17 September 2025 at 12:47
    #94890

    I was already able to solve this.

    for now I don’t have more problems.

    Thank you.

    serkan
    Moderator
    17 September 2025 at 22:13
    #94894

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Arkiz | Architecture WordPress Theme
Login and Registration Log in · Register