Sticky header also in mobile view


#22

Sticky header! Yes, please! On mobile, sites become so vertically long… Makes is so much easier for a user to lost on the page. Import a sticky header, please!


#23

Yes, Myra - if you could mention where to add this css that would be so helpful, as well! (<= nube)


#24

Yep, adding my +1 for the sticky header, makes long single page layouts, relying on the header for navigation, nigh on impossible to use on something as popular as a tablet without it… let alone phones…


#25

Me too, please! ASAP.


#26

I don’t know in how far the function has been added, but this custom css works for me for the sticky nav.
Even threw in a smooth transition;

@media (max-width: 760px){
.admin-bar .sticky-style-slide.header-style-1.a-sticky .mk-header-holder, .admin-bar .sticky-style-slide.header-style-1.a-sticky.toolbar-false .mk-header-holder, .admin-bar .sticky-style-slide.header-style-1.pre-sticky .mk-header-holder, .admin-bar .sticky-style-slide.header-style-3.a-sticky .mk-header-holder, .admin-bar .sticky-style-slide.header-style-3.a-sticky.toolbar-false .mk-header-holder, .admin-bar .sticky-style-slide.header-style-3.pre-sticky .mk-header-holder {
position: fixed !important;
top: 43px !important;
left: 0px !important;
width: 100vw!important;
transform: rotate(0deg) !important;
transition: top 1.05s ease .1s !important;
}
.header-style-1 .logo-has-sticky .mk-sticky-logo, .header-style-1.a-sticky .logo-has-sticky .mk-desktop-logo, .header-style-3 .logo-has-sticky .mk-sticky-logo, .header-style-3.a-sticky .logo-has-sticky .mk-desktop-logo {
transform: rotate(0deg) !important;
}
.mk-header {
background-color: #ffffff;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
.a-sticky .mk-header-holder {
transition: top 1.35s ease .5s;
}
}

Only thing is that, the screen “jumps” when scrolling down.


#27

still no sticky mobil header?? i can´t believe it!


#28

Dear Artbees Team,

I believe it is a must to have a configurable sticky mobile header in Jupiter.

Thanks a lot,
Atila


#29

We need this as well. I hope it’s coming!


#30

Where are you placing this custom code?? In the “Custom CSS” tab under "Theme Options>Advanced? Or are you editing the actual stylesheet?


#31

Hi Colin,

Thanks for the css code,
as I am a complete newbie to this… may I know where you are adding this to make it work?

Ive tried the style sheet as well as the one in theme options > advanced > custom css, but nothing has changed and still no sticky header… help!

Thanks!


#32

For the newbes; CSS code must be in Theme Options > Advanced > Custom CSS.
This is for me what’s working for header style 1, it works smoothly.

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

.sticky-style-fixed.header-style-1 .mk-header-holder {
right: 0;
position: fixed !important;
}
.mk-header {
padding-top: 16%;
}
html #wpadminbar {
top: -100px;
}
}

1 problem tough… if I click on the navigation, the site scrolls back to home…the navigation does work good but I don’t need the home scrolling… will contact Jupiter about this


#33

…what do we need to do to have a simple function like this…please artbees do something :frowning:


#34

I`m also on the line. +1!


#35

Waiting, requesting this for years on this theme.

So advanced theme, but still lagging a bit on the mobile side.

Thx Artbees 'cauose I’now youl get this done asap.

M.


#36

This should fix it (this one does not jump to the top of the page):

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

#mk-header-1 {
position: fixed !important;
height: 90px;
}

#theme-page {
top: 70px;
}

}

#37
  • 1 on this feature! so important!

#38

Thanks this is the best solution so far. I have only one issue with that. On a site where I disabled the header I have a blank white space which is behaves like the navigation


#39

this fix works fine if you make the sticky header the same height as the regular header and set the behavior option to fixed sticky


#40

+1 for feature request!


#41

I just can’t say how important this is and I’m telling to Artbees for years now, that mobile should get a lot more attention. Since it is briliant on desktop, but lagging behind on mobile compared to other top themes.

Still cudos to the team as I own several other themes, but none comes close to what we have here.