How to make Mobile View Header Fixed or sticky - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
November 13, 2023 at 9:47 pm #1425499

nasrullah2
Participant

How we can make mobile view header fixed while scroll down or scroll up the page, I have added below css code in quick css code, it work but removed the background color.

@media only screen and (max-width: 767px) {
#header_main {
position: fixed !important;
top: 0;
width: 100%;
z-index: 9999;

}
}

November 14, 2023 at 12:05 am #1425510
Nikko
Inactive Moderator
Hi nasrullah2,

Can you try to change the CSS code to:
```
@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
}
```
Let us know if it helps.

Best regards,
Nikko
November 14, 2023 at 1:40 am #1425521

nasrullah2
Participant

Hello Nikko
it work, but the banner image in the page are hidden behind of the of the header, at the right side we have a logo 5o years which is mostly hidden by the header.
you can check https://test.hesperian.org/ link

November 14, 2023 at 10:06 am #1425543
Nikko
Inactive Moderator
Hi nasrullah2,

I see, please replace it with this CSS code:
```
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
  }

  .responsive #top #main {
    padding-top: 82px !important;
  }
}
```
Best regards,
Nikko
November 14, 2023 at 9:21 pm #1425598

nasrullah2
Participant

Hello Nikko,
thank you so much, it fix the issue, one another thing that I want to add some space in the top and bottom of the logo like 5 or 7 px I have found through inspect, if we change the width value from auto to 70px, it will fix the issue, I open the file avia-merged-styles-2ecff8ddfb8aa8901d1c5c36c31532c2—6553d4bb76230.css which are located in uploads/dynamic_avia/ and edited, but after some time it change back to auto, i think these are temporary file, could you please help where I can find the original file location for below code or have I can add 5px space in the top and bottom of the Logo only in Mobile view header.

@media only screen and (max-width: 767px)
.responsive .logo img, .responsive .logo svg {
height: auto!important;
width: auto;
max-width: 100%;
display: block;
max-height: 80px;
}

November 15, 2023 at 3:25 am #1425622

Nikko
Inactive Moderator

Hi nasrullah2,

Try to go to Enfold > Performance > CSS File Merging And Compression set it to Disable – no CSS file merging and compression
Let us know if this helps.

Best regards,
Nikko

November 19, 2023 at 11:31 pm #1426013

nasrullah2
Participant

Hello Nikko,
it make more problem’s with my site, and I turn back enable, could you please let me know where I can find the exact file for below code,

@media only screen and (max-width: 767px)
.responsive .logo img, .responsive .logo svg {
height: auto!important;
width: auto;
max-width: 100%;
display: block;
max-height: 80px;
}
best Regards

November 21, 2023 at 12:16 pm #1426147

Mike
Moderator

Hi,
Thank you for your patience, when I check your site on mobile the header seems to be sticky correctly and the banner image doesn’t seem to be hidden, please see the screenshot in the Private Content area. If you are not seeing it this way try to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
So please explain what you would like to change now, and please disable any caching plugin and Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression so we can examine better.

Best regards,
Mike
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.