Sticky Meny for Desktop and scrolling on Mobile

Hi,

I just updated my Sydney Pro theme. A couple of minor issues showed up, like on Homepage and Blog pages the Featured Image went to the top of the page and hid behind the Header. I was able to resolve it by making the .site-header: relative.

I came across this topic in the forum where they are using Sticky menu and on mobile it starts scrolling. I am very interested in this because the sticky header takes up a lot of screen space on mobile screens.

Can you help me achieve this? It seems this is exactly what I have been looking for. I thought maybe this was added in the latest update, but I cant find the settings for this.

My site is here.

Hello there,

Please give the below CSS code a try and let me know how it works.


@media only screen and (max-width:991px){
  
  .site-header.fixed.float-header {
    position: relative !important;
  }
  
}

Regards,
Kharis

Thanks Kharis but sorry, it didn’t work.

Hello there,

Could you please confirm if the group of CSS code is error free? You can validate it by using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis

Hello Kharis,

Can’t thank you enough for looking into this on a Sunday :slight_smile:

Yes, the css is error-free except minor things, nothing related to media queries or header.

thanks,

him

Hello Kharis,

These are the media queries present along the code you shared:

`@media only screen and (max-width:1030px){

.site-header.fixed{
position: relative !important;
}

.site-header.fixed.float-header{
position: fixed !important;
}

.site-header.float-header {
background-color: rgba(255, 255, 255, 1.0) !important;
}

}

@media only screen and (min-width: 1020px) {

.site-header {
position: relative !important;
}

.site-header.fixed{
position: relative !important;
}

.site-header.fixed.float-header{
position: fixed !important;
}

.site-header.float-header {
background-color: rgba(255, 255, 255, 1.0) !important;
padding: 20px 0 0 0 !important;
}

}

@media only screen and (max-width: 991px){

.site-header.fixed.float-header {
position: relative !important;
}

}

@media only screen and (max-width:600px){

.site-header, .site-header.float-header{
position: static !important;
}

}

Hello there,

Thank you for the followup!

What will happen if you move the code onto the most top line – before @media only screen and (max-width:1030px) line?

Regards,
Kharis

Hi Kharis,

Just implemented that, its active now, and the status remain same. Sticky on mobile :frowning:

Another strange thing happens. When we scroll down, the logo becomes bigger in size and gets cut off from the screen (portrait mode).

Hello there,

What is your screen resolution? You can check it here http://www.whatismyscreenresolution.com/.

Regards,
Kharis

Hi Kharis,

Screen resolution of the phone I am testing it on is 360 x 640

Hello there,

For efficiency reason, please grant me to access your site’s admin area. I’d like to fix it directly over there. Send me the working login credentials to kharisblank@gmail.com and mention the link to this thread.

Regards,
Kharis

Hello Kharis,

Mailed you the details. Shall wait for your update.

thanks and best,

him

Hi Kharis,

Any success on the issue? Hope you got the details in the mail.

thanks,

him

Hello there,

I haven’t received it yet. Please resend it once again, don’t forget to include the following:

  • Link to this thread
  • Working admin login URL
  • An account with admin right

Regards,
Kharis