Archived topic
Just sticky menu on mobiles (rather than sticky after scroll)
10 replies · Started by SCIP on August 21, 2015
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
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;
}
}
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?
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>
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
Hi there,
can you share a link to the site ?
No, it's a staging site.
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?
I'd need a way to disclose login information confidentially. This thread does not seem to have that functionality.
Only the topic starter has the private info field.
Can you open a new topic for yourself?
Thanks!
