Specific instructions for mobile devices?

• 

  barrygcooper · Member · Jul 30, 2014 at 3:49 pm

  • Copy link
  • Add topic to favorites

  Hey everyone,

  Slightly challenging one for you…

  I’m very happy with the way my site looks on my Mac and my iPad. However, on iPhone (and I assume some other mobile devices) I have a problem.

  At present, the CSS code for my menubar (which “sticks” to the top of the screen as a user scrolls down the page) leaves a small gap to allow for the WordPress menu at the very top (you know, the one that appears at the top when you’re logged in to WordPress).

  The relevant code looks like this:

  #page {
  	margin-top: 33px;
  }
  
  #site-navigation {
  	position: fixed;
  	top: 0;
  	left: 0;
  }
  
  body.logged-in #site-navigation {
  	top: 31px;
  }

  Problem with this small gap is that once you start to scroll down the page, you get this:

  

  …which ends up wasting quite a bit of screen space.

  So, question: is there way to fix this? :) Specifically, is there a way to make sure my menubar is always at the top of the screen, EXCEPT when the WordPress menubar needs to be there?

  If not, might there be another workaround?

  I’d really appreciate your help on this one – thank you!

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Jul 30, 2014 at 3:52 pm

  • Copy link

  See here please http://theme.wordpress.com/themes/features/responsive-layout/

  Know that responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. The mobile theme is a completely different theme.
  When we use a responsive layout theme we go to > Appearance > Mobile and disable the mobile theme

• 

  barrygcooper · Member · Jul 30, 2014 at 3:56 pm

  • Copy link

  Hey timethief, thanks for your response.

  That’s not quite the issue I’m having. I’ve already disabled the mobile theme because I’d like to use the standard theme. Everything looks great, EXCEPT for that gap you can see in the picture between the top of the screen and the top of the menubar. In essence, I would just like to close that gap.

• 

  timethief · Member · Jul 30, 2014 at 3:57 pm

  • Copy link

  Okay Barry. I don’t help with CSS editing but either another Volunteer or Staff will help you when they can.

• 

  thesacredpath · Member · Jul 31, 2014 at 2:06 am

  • Copy link

  Hi Barry, add the following to the very end of your custom CSS.

  @media screen and (max-width: 600px) {
      #wpadminbar {
          position: fixed !important;
          top: 0;
      }
  }

• 

  barrygcooper · Member · Jul 31, 2014 at 8:26 am

  • Copy link

  thesacredpath, you have engineered happiness. Thank you very much! It works perfectly.