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

[SCIP]

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

[Tom]

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;
      }
}

[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?

[Tom]

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>

[Richard]

I added this to generate_before_header_content:

<div class="hide-on-mobile">
      <div class="site-logo">
            <img src="/wp-content/uploads/2020/02/200x40-vector-sparked-logo-for-flux-checkout-white-1.svg" alt="" />
      </div>
</div>
<div class="hide-on-desktop">
      <div class="site-logo">
            <img src="/wp-content/uploads/2022/03/Square-S-Sparked-Innovations-logo.svg" alt="" />
      </div>
</div>

The small logo is not showing in the “Prime” GP layout
https://watch.screencastify.com/v/auxbEceBa91n06FW15nn

[David]

Hi there,

can you share a link to the site ?

[Richard]

No, it’s a staging site.

[Ying]

Hi Richard,

Sorry we can’t help more without seeing the site.

There can be various causes for the mobile logo not showing.

Can you make the site online?

[Richard]

I’d need a way to disclose login information confidentially. This thread does not seem to have that functionality.

[Ying]

Only the topic starter has the private info field.

Can you open a new topic for yourself?

Thanks!

[Richard]

OK, post : https://generatepress.com/forums/topic/different-logo-for-mobile/#post-2153401

[Author]

Posts