Menu button on mobile & padding

• 

  annsun86 · Member · Sep 13, 2020 at 6:41 am

  • Copy link
  • Add topic to favorites

  Hi there,

  Any way I can fix this issue with the menu button on mobile? It’s situated weirdly, looks like an error.

  And how can I reduce the padding above the image?

  FYI I have hidden the page title with

  .site-main .page-title {
  display: none;
  }

  Thanks in advance!

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

• 

  slantedplanet · Member · Sep 13, 2020 at 3:51 pm

  • Copy link

  Hi there!

  I had success with this CSS:

  
  /* set spacing between menu and first photo  */
  div#content.site-content {
  	padding-top: 100px !important;
  }
  
  /* mobile styling */
  @media only screen and (max-width: 767px) {
  	/* set horizonal positioning of hamburger menu */
  	.menu-toggle {
  		right: 26px; /* default 94px */
  	}
  	/* set spacing between menu and first photo  */
  	div#content.site-content {
  		padding-top: 0 !important;		
  	}
  }

  Looking at the Eris theme demo site in a mobile view suggests to me that the theme designer meant to leave room to the right for a search icon and the toggle for the hidden sidebar. If those elements were present, the default mobile menu positioning would not look so peculiar.

  I included CSS to reduce padding above the first photo, although I don’t love a solution where I have to append !important to make the code work. As a volunteer, I don’t have visibility to all your CSS and theme settings, but I can see in the code that a large inline top-padding value is being set in some other way. Ideally, you would find and change that setting instead of using more CSS to cancel it out.

  Doing that might be a good opportunity to take advantage of live chat assistance to work with someone who can see your custom CSS and theme settings.

  If you didn’t know, your WordPress.com plan includes live chat support? Staff frequently recommends live chat support as a way to get help faster with custom CSS questions.

  Please let us know if this code works for you.