[Resolved] Just sticky menu on mobiles (rather than sticky after scroll)

Home Forums Support Just sticky menu on mobiles (rather than sticky after scroll)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #131226
    markinbrighton

    Is it possible to just have the sticky menu in the header on mobile devices, rather than becoming sticky after you scroll? Then I can possibly hide the main logo.

    I’ve searched for forum and can’t find anything.

    I might be able do something with the class navigation-stick, but wondered if you know a better way.

    Great theme BTW

    #131265
    Tom
    Lead Developer
    Lead Developer

    You can try just removing your header on mobile – then your nav should be at the top and should stick.

    @media (max-width:768px) {
          .site-header {
                display: none;
          }
    }
    #133167
    Jesse

    Mark, can that code be added via any of the hooks. I have a similar question. I bought all of the plugins. Can any of them be used to either hide the header on mobile or to show a different header image than on desktop?

    #133232
    Tom
    Lead Developer
    Lead Developer

    Hi Jesse,

    That code is added using CSS: https://generatepress.com/knowledgebase/adding-css/

    Hide the header on mobile:

    @media (max-width:768px) {
          .site-header {
                display: none;
          }
    }

    To show a different header on mobile, you would use GP Hooks and the “Before Header Content” hook.

    Then you would add two logos:

    <div class="hide-on-mobile">
          <div class="site-logo">
                <img src="URL TO YOUR DESKTOP LOGO IMAGE" alt="" />
          </div>
    </div>
    <div class="hide-on-desktop">
          <div class="site-logo">
                <img src="URL TO YOUR MOBILE LOGO IMAGE" alt="" />
          </div>
    </div>
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.