Switch Sticky Menu on Mobile device to Static Mode

Hello Support,

I have the Header Type set to No Header. And, when I switch the Sticky Menu option to STATIC, it remains sticky. It’s ok to remain as Sticky in Desktop, but not tablet or mobile. Ideally, it’s best if all 3 were static.

I have a lot of CSS coding that may be preventing it from going into static mode. I’m unsure because I cannot read coding very well.

Here is a link to the page: https://21stcenturyparadigm.com/inspiring-oneself/

What do you suggest?

Thanks, Bo

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      header#masthead.site-header,
      header#masthead.site-header.float-header {
        position: static !important;
        padding: 20px 0 !important;
      }
    }

Regards,
Kharis

Hi Kharis,

Thanks for your help. Though, the coding you supplied isn’t making it work. It’s still in sticky mode…

Help?

Bo

Hello Bo,

I saw from web browser’s inspector tool your site has active caching with the WP Super Cache plugin. You should flush it first when new changes applied. Otherwise the site will force web browser to load the cached version.

Regards,
Kharis

Hi Kharis,

Thanks for the heads up.

I did delete the cache, and it’s still in the sticky mode.

I attached a screenshot if that helps.

Help?

Thanks, Bo

Hello there,

Try adding this CSS code:

    @media only screen and (max-width: 1024px) {
      #page.site {
        margin-top: 0;
      }  
    }

Regards,
Kharis

Hello again.

I added the coding, deleted cache, and still not working.

To confirm, here is the coding that I’ve added so far…

    @media only screen and (max-width: 1024px) {
          header#masthead.site-header,
          header#masthead.site-header.float-header {
            position: static !important;
            padding: 20px 0 !important;
          }
        }
      @media only screen and (max-width: 1024px) {
          #page.site {
            margin-top: 0;
          }  
        }

Thanks for your help, Bo

Hello wonderful support,

Any ideas on how to delete the Sticky menu, having it be static on mobile, tablet and PC devices?

Thanks much, Bo

Better yet, on the PC device, is it possible to have the Sticky menu be on the Home Page only, while being static on secondary pages? :slight_smile:

Hello there,

Sorry, I don’t get it clearly. Does this mean you want to have static menu on all devices screens except homepage on desktop?

Regards,
Kharis
aThemes Support

Yes, Kharis, that is correct.

Thanks much, Bo

1 Like

Hello Support,

Following up on a previous challenge…

Is it possible to have static menu on all devices screens except homepage on desktop?

Thanks for your help.

Bo

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    body:not(.home) .header-clone {
      display: none;
    }

    body:not(.home) #masthead.site-header,
    body:not(.home) #masthead.site-header.fixed, 
    body:not(.home) #masthead.site-header.float-header {
      position: static !important;
    }

Regards,
Kharis
aThemes Support

Thank you, Kharis. That worked perfectly. Much appreciated. Bo

You’re welcom!

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