Sticky/fixed header image on mobile version...this seems to be different

Hi there,

first of all, I know, this topic seems to have been, already, addressed in other blogs, but somehow, I can´t find the right answer for my (maybe) specific situation.

Here is the problem:

I have the following website, http://jackbuzzzonemusic.cf/, which works perfectly on the desktop version but not on the mobile one.

I would like the mobile version to look exactly like the desktop version, with the header image, of the different pages, being fixed in the background, while text container, text and menu header/button scroll down or up.

I´ve tried all the codes that I know, but none of them seem to work for my case.

So, I partly “solved” the problem with the following code:

@media only screen and (max-width: 1024px) {
.header-image {position: fixed }
}

the problem is, it looks like the header image goes over the text when one scrolls up or down…in other word, it´s a bit messy.

2nd problem: the image (.wp-image-673), the first pic that belongs to the text, seems to go over the header image when one scrolls down or up. I would like this picture to be like the one with 2 hands playing a chair.

Thanks a lot,

Jacopo

Hello there,

As the header image is actually separated from logo and menu block, you have to group them in a single DIV element, which can be done by doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      if( $('.header-image').is(':visible') ) {

        $('.site-header, .sydney-hero-area').wrapAll('<div class="site-header-wrapper"></div>');

      }

    })(jQuery);
  1. Update
  2. Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .site-header-wrapper {
      position: fixed;
      display: block;
      width: 100%;
      z-index: 2;
    } 

Regards,
Kharis

Hi Kharis,

thanks a lot for your quick reply.

The code made its job and some of the problems are now fixed.

A couple of issues are still present though.

The header image is in the foreground instead of being (like in the desktop version) in the background. That´s annoying since when I scroll up or down, the image covers the text and the content of the other pages, especially in the tablet version.

By the way, does the tablet version use the same CSS code as the phone? I mean, this code @media only screen and (max-width: 1024px) {{}}.

Thanks a bunch and have a nice day,

Jacopo

Hello there,

Please try this code:

    .site-header-wrapper {
      position: relative;
      display: block;
      width: 100%;
      z-index: 2;
    } 

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

    .site-header-wrapper .sydney-hero-area {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    } 

Regards,
Kharis

Hi Kharis,

thanks a lot, that solved the problem!

Have a nice day,

Jacopo

You’re welcome Jacopo!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like