Header issue in mobile

  • Resolved Vivek Nath.R

    (@viveknath322)


    3 years, 8 months ago

    Hi,

    I’ve created megamenu header and its working perfectly. Found a small bug in mobile view while adding a transparent blurred background when header is sticky. In mobile view when clicking on hamburger icon menu items are going backward. Below is the code I’ve added. 

    selector.elementor-sticky--effects{
    background: rgba( 7, 3, 60, 0.45 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5.0px );
    -webkit-backdrop-filter: blur( 5.0px );
}

    screen capture: https://www.awesomescreenshot.com/video/4460272?key=c5efc27b9b5cc18f52db6f1fcc1b3ad0

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @viveknath322

    Hope you are well. Could you please provide me the link to that page you are having an issue with the Mobile Menu? So that I can check the issue properly and help you to find a solution as soon as possible.

    Looking forward to your response and we are always here to help you.

    Best Regards
    Prosenjit

    Thread Starter Vivek Nath.R

    (@viveknath322)

    Ohh this is a local environment.

    Could you please try to add the above code in your elementor header and see if you have the same problem?

    Hi @viveknath322

    I have tested with the given CSS but couldn’t able to detect any issue. From your given video, seems the issue is more related to z-index. Please Check if you have applied any device specific z-index to the immediate next section of the header or any custom CSS media queries. Removing or reducing the z-index value can solve your issue. But without checking the issue from your end, it is bit difficult to provide you an optimal solution.

    Let me know if that helps.

    Best Regards
    Prosenjit.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header issue in mobile’ is closed to new replies.