Different sticky site header style on Mobile (Basic) and PC (Scroll Back)

Hi everyone,

First of all, I apologize in advance if this topic has already been covered in a post (I have searched but I have not found it).

I'm using the Mycelium template (V 7.1) and I would like to know if there is any possibility to have the (Basic) header fixed for the mobile version, and the header fixed (Scroll Back) in your PC version.

I'm attaching a screenshot, since my English is not the best.

URL: https://b41t-sqsp.squarespace.com/

Password: w3dp0v-/ashjnma09svvE

Any information will be welcome. Many thanks in advanced 🙂

Hi,

This is possible. You can enable Scroll Back Header. Then we can give code to change it to Basic Fixed on Mobile

On 6/3/2023 at 1:32 AM, tuanphan said:

Hi,

This is possible. You can enable Scroll Back Header. Then we can give code to change it to Basic Fixed on Mobile

Thank you very much Tuanphan.

I just did it. What would be the next step? 🙂

Thank you very much in advance.

4 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
header#header {
    transform: unset !important;
}
}

 

Thank you very much! It works perfectly 😀

You've been a great help to me.

Greetings from Spain!

Hi everyone!

I've a question regarding this already solved topic that I opened some time ago:

Is there any way to keep the change that this code makes in the mobile menu and also have fully solid background too, instead of gradient?

(The gradient background would remain as it is currently in the PC version, and the solid background only in the mobile version).
 

URL: https://www.betis41triana.com/

Pass: JB14EW31-arte
 

Thank you very much in advance

On 9/22/2023 at 4:22 PM, B41T said:

Hi everyone!

I've a question regarding this already solved topic that I opened some time ago:

Is there any way to keep the change that this code makes in the mobile menu and also have fully solid background too, instead of gradient?

(The gradient background would remain as it is currently in the PC version, and the solid background only in the mobile version).
 

URL: https://www.betis41triana.com/

Pass: JB14EW31-arte
 

Thank you very much in advance

Hi,

You mean

• Change Mobile Menu to solid white background (all pages)
• Don't do this on desktop

?

17 hours ago, tuanphan said:

Hi,

You mean

• Change Mobile Menu to solid white background (all pages)
• Don't do this on desktop

?

 

Hi tuanphan,

Yes. with the CSS code I managed:

To have the menu Fixed position > Backward movement in the PC version

To have the menu Fixed position > Basic for the mobile version

This was the intended effect 🙂

I wonder if in the mobile version a solid black background could be added to the menu, in addition to what has already been modified, maintaining the gradient style in the PC version.
(it is simply to prevent the texts and the menu header from visually merging)

Without a doubt my English is not the best. I added a screenshot in case this helps.

Thank you very much in advance!

To set solid header on mobile, when scroll, use this CSS code

@media screen and (max-width:767px) {
header#header.shrink {
    background-color: #000 !important;
}
}