Sticky Menu for Desktop only

Sticky Menu is a really cool feature, but in mobile browsers it does not always look properly (when browser navigation bar disappears while scrolling down, sticky menu remains in same place – http://i.imgur.com/RQVYqTd.jpg)

So it possible to turn off menu’s “stickiness” for mobiles and leave it for desktops only?

hi,
right now there is no feature to disable sticky menu for mobile, thank you for your suggestion we will talk about this.

Thanks for you message.
Radu A.

tss,
its realy simple hack here you have:

open the wp-content/themes/Newspaper/style.css

search for following class

.affix {
  left: 0;
  right: 0;
  top: 0px;
  height: 48px;
  z-index: 9999;
  position: fixed !important;
}

and replace it with this

@media (max-width: 767px) {
.affix {
  left: 0;
  right: 0;
  top: 0px;
  height: 48px;
  z-index: 9999;

}
  }

@media (min-width: 768px) {
.affix {
  left: 0;
  right: 0;
  top: 0px;
  height: 48px;
  z-index: 9999;
  position: fixed !important;
}
  }

yua welcome))

• This reply was modified 12 years by boruxk.

Thank you guys!

one more time!

the solution was working with older versions,
but now with version 6 i have the same problem again and this solution from above is only working if i am making a small window on pc.
It is not working on mobile devices like samsung s6.
So my question, have you built in a mobile device detection, if yes, where is it?
how to disable it?

i know, thats the code i am using:


@media (min-width: 768px) {
.td-header-menu-wrap.td-affix {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-right: auto;
margin-left: auto;
width: 100%;
z-index: 9999;
position: fixed;
top: 0;
}
}
@media (max-width: 767px) {
.td-header-menu-wrap.td-affix {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-right: auto;
margin-left: auto;
width: 100%;
z-index: 9999;
position: relative;
}
}

it was up to this lines

-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

and my firefox browser in my samsung

to get this working i have added this line:

-moz-transform: translate3d(0, 0, 0);

so thats the whole code for now

@media (min-width: 768px) {
.td-header-menu-wrap.td-affix {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-right: auto;
margin-left: auto;
width: 100%;
z-index: 9999;
position: fixed;
top: 0;
}
}
@media (max-width: 767px) {
.td-header-menu-wrap.td-affix {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-right: auto;
margin-left: auto;
width: 100%;
z-index: 9999;
position: relative;
}
}

Bogdan please add this line to your code

-moz-transform: translate3d(0, 0, 0);

many people are using firefox