Mobile layout

• 

  seafrina · Member · Mar 2, 2016 at 4:37 am

  • Copy link
  • Add topic to favorites

  Hello,

  Id like to know if its possible to change the layout of the Soho them on the mobile homepage.
  The site i need help with is seafrina.com

  Wondering if with a CCS code I can have the menu be immediate on the page instead of having to click the small button on top right corner of the page, to make the menu easier to access and user friendly.

  Thank you

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

• 

  timethief · Member · Mar 2, 2016 at 5:20 am

  • Copy link

  The mobile ready theme is a default theme and a completely different theme that you do not need to enable, if your theme is listed as a responsive layout theme here https://theme.wordpress.com/themes/features/responsive-layout/ and Soho is listed there.

  The mobile default theme is provided for those who run older themes that aren’t the gold standard which is 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/

• 

  thesacredpath · Member · Mar 3, 2016 at 8:35 am

  • Copy link

  Hi there, generally with responsive themes with the touch-menu button that appears for mobile devices, this isn’t easily done, but I was able to do it in Soho. Add the following to the bottom of your custom CSS and see what you think. I made a number of other adjustments to make things look better and cleaner.

  @media screen and (max-width: 1120px) {
  span.menu-button {
  	display: none;
  }
  #header #mainmenu, #header #secondarymenu, #header #menu-social {
  	display: block;
  }
  #mainmenu {
  	width: 100px !important;
  	clear: none;
  	float: right;
  	margin-right: 30px;
  }
  }
  @media screen and (max-width: 481px) {
  #mainmenu {
  	float: none;
  	margin-left: auto;
  	margin-right: auto;
  	margin-top: 0;
  }
  #logo {
  	margin-left: auto;
  	margin-right: auto;
  	float: none;
  }
  }