Mobile Collapsed Navigation Issues

Support
#1

Hi,

I have a collapse navigation set up for a client site. The issue im having is the menu items only display when you are at the top of the page. So you click the burger icon at the top of the page, and the menu will be there. If I scroll down the page and toggle the burger icon the menu items are no longer there. It appears they stay static to the top of the page.

Please see screenshots below.

Top of the page:

Scrolling through the page:

Thank you in advance.

#2

Hi There,

Please provide your URL so we can take a closer look, Thanks!

#3

Sure - attached as a secure note.

Thanks

#4

Hi There,

I still can’t access your website after entered the construction password.

Could you please double check?

Thanks.

#5

Hi, thanks for replying. It worked ok for me.

#6

Hi There,

Please try removing the off canvas menu and re-adding again with the default settings.

If that does not help please provide your login credentials in a secure note so we can take a closer look.

It is possible that a combination of settings of your bar x container x menu element are causing this as this is not the expected or initial behavior of this element.

Hope it helps

#7

Hi,

I tried re-adding as you said, unfortunately it did not solve the problem. Please see the attached note for credentials.

Thanks in advance

#8

Hello There,

I have logged in and after further investigation, you are having the problem because of your custom css. You have added this code:

.burger-icon {
  position: absolute !important;
  right: 0 !important;
}

This has affected the position and what you need instead is to just simply position the icon using Flex Layout settings.

I have removed the code and changed the settings. Please check your site now.

#9

Thanks! That seemed to do the trick.

I was using the suggested code from a previous post I made: https://theme.co/apex/forum/t/mobile-nav-centered-logo/20854/8

Will changing this have any affect?

Thanks

#10

Nevermind, it did change the layout. The logo is no longer centered, but now left aligned on the nav bar.

How can I achieve that same layout without having the bug with the menu items on scroll?

Thanks

#11

Hi,

To make your logo centered, you need to add the css provided above to your Main Nav - One Page v2 Header > CSS as well.

.burger-icon { 
    position: absolute !important;
    right: 0 !important;
}

Thanks

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.