How to "fix" the menu-bar to the "top" of the screen in "mobiles" (201

mickeykumra · Member · Oct 24, 2015 at 9:59 am
Copy link

Add topic to favorites
Hi..

I am using a 2014 theme.. The menu bar (top ribbon) remains fixed at the top of the screen in case of desktops and tablets.. But it doesn’t remain fixed on mobiles.. The Customizer shows similar behaviour..

How can this be corrected..? Please find below the link for the page on which I have posted screenshots from the Customizer.. An image can be enlarged by clicking on it..

url : http://wordedworks.com/test/

Thanks..!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Oct 24, 2015 at 11:55 pm
Copy link
The mobile ready theme is default and a completely different theme that you do not need to enable at all, if your theme is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/

A responsive layout theme adapts to different screen sizes so that your website will work (and be optimized for) iPhones, iPads, Android and other mobile devices. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

When we use a responsive theme we disable the mobile theme. Go to > Appearance > Mobile and disable the mobile theme

You can read more in the support docs at https://en.support.wordpress.com/themes/mobile-themes/

You can test your site at this link https://www.google.com/webmasters/tools/mobile-friendly/
ehtis · Staff · Oct 25, 2015 at 10:09 am
Copy link
Hi Mickey,

I suppose you want the menu to remain fixed at the top of the screen, even if you scroll down.

This can create a few problems on mobiles; since the theme is responsive like @timethief mentioned, your menu structure changes and if you expand the collapsed menu, it might cover the entire screen.

Still, give the following code a try to see if you like it being fixed at the top:
```
.site-header {
    position: fixed;
    top: 0px;
}
```
mickeykumra · Member · Oct 26, 2015 at 5:18 am
Copy link
Hi, timethief and ethis!

Thank you for your detailed inputs. :)

Thanks for the code, ehtis! I inserted it in the CSS editor on Customizer, and it works great!

I know having a menu fixed to the top can lead to some unwanted results. The WordPress team would have given some thought to it before making it non-fixed. But I would still like to try at my end to see if I could get along just fine with a fixed-position menu.

Hoping I didn’t break anything!

Much love! :)
ehtis · Staff · Oct 26, 2015 at 5:55 am
Copy link
Glad it worked for you, happy blogging! :)
mickeykumra · Member · Oct 26, 2015 at 6:47 am
Copy link
Hey again!

A small issue cropped up! Now, in mobile view, the header remains fixed at the top, but it covers a bit of the element below it (the image on the page). Any setting I could insert to create a margin between the fixed header and the image below?
mickeykumra · Member · Oct 26, 2015 at 7:06 am
Copy link
Is there any way to add some CSS “only” for mobiles?
mickeykumra · Member · Oct 26, 2015 at 7:28 am
Copy link
Hey..!

I used the following code.. It seems to cover everything..

.site-header {
position: fixed;
top: 0;
}

@media only screen and (max-width: 600px) {
div.main-content {
margin-top: 48px;
}
}

Credits:
1) ehtis
2) http://stackoverflow.com/questions/15061520/responsive-css-styles-on-mobile-devices-only
3) http://mydevice.io/devices/#sortSmartphones
ehtis · Staff · Oct 26, 2015 at 11:18 am
Copy link
Hi, apologies for not getting back to you sooner! Great to read that you were able to find a fix, pretty awesome!

No items found.