CSS does not work for header when screen size is smaller than 767 px width

[Osas]

Hello,

I do have a strange problem with the header. I am using the theme X. I want header to be shown when the page is being scrolled up. I found here in forum a solution for this: CSS and JS. The problem is, it is working fine but only for big screens (starting with 768PX width). The code does not work for smaller screens. The menu, however, is also changing for the screen width 767PX and smaller into pop-up menu.

The code for applying the CSS to 767PX and smaller, s. below, does not work either.

@media only screen and (max-width: 767px){
/* CSS that should be displayed if width is equal to or less than 767px goes here */
}

What I am doing wrong?

[jade]

Hey Mardas,

Firstly, please check if there is any CSS error in the codes you have.To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

If there is no error at all, try update the media query from:

@media only screen and (max-width: 767px){
/* CSS that should be displayed if width is equal to or less than 767px goes here */
}

to

@media (max-width: 767px ){
/* CSS that should be displayed if width is equal to or less than 767px goes here */
}

Hope this helps.

[Osas]

Hello,

Thanks for the info. Unfortunately, this didn’t help.

The CSS I am trying to get working is quite simple and there are no errors, please see below. The JS is working also; otherwise I wouldn’t work at all and in my case this is not working only for 767px and smaller.

.nav-up {
top: -60px !important;
transition: all ease 0.5s;
}

If I am writing the CSS, please see below, the color is changing well but the top: -60 doesn’t apply.

@media (max-width: 767px ){
.nav-up {
top: -60px !important;
transition: all ease 0.5s;
}
body {
color: blue;
}
}

Any further ideas?

[ruenel]

Hello @Osas,

Thank you for the clarifications. The top: -60px !important; will only apply if your “.nav-up” element is position as absolute. If you want to move it up, you may use margin-top: -60px; instead. You may need to update your css and use this:

@media (max-width: 767px ){
  .x-navbar {
      position: fixed;
      width: 100%;
  }
  
  .nav-up {
    top: -60px !important;
    transition: all ease 0.5s;
  }

  body {
    color: blue;
  }

  .x-container.max.width.main {
    margin-top: 80px;
  }
}

We would loved to know if this has work for you. Thank you.

[Osas]

Hello,

It is working well now! Thank you very much!

Have a nice day

[paul.r]

You’re welcome!