Dyad 2 Theme: Remove header picture for mobile phones only

• 

  crostiniqueen · Member · Apr 26, 2017 at 10:48 am

  • Copy link
  • Add topic to favorites

  Hi there
  I’m desperately trying to remove the header picture on my wife’s blog crostiniqueen.com for mobile phones only. On Tablets and computers the header picture looks great, but on mobile it’s irritating.
  I tried several pieces of CSS code i found in forums, by adding it to the wordpress.com Custom CSS window. Nothing worked.
  I’m solely using the online version of wordpress.com, no plugins or child themes etc.

  Would be enourmously grateful for any help.

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

• 

  garysixtyeight · Member · Apr 26, 2017 at 1:17 pm

  • Copy link

  Hi there,

  Do you mean the banner image that says “yummie”

  If you do, please try adding the css below in My Sites → Customize → CSS:

  @media only screen and (max-width: 768px) {
  	.featured-content {
  		display: none;
  	}
  }

  That css should hide it on screens smaller than 768px.

  You can change the 768px to whatever you prefer, but it might require some padding tweaks at different screen widths. If the css needs to be tweaked, please let me know.

  If that’s not the image you mean, or if the css doesn’t work, please let me know too. Thanks :)

• 

  crostiniqueen · Member · Apr 26, 2017 at 1:52 pm

  • Copy link

  Dear garysixtyeight

  Thanks so much for your help! it worked!!!
  Much appreciated…
  Best regards

• 

  garysixtyeight · Member · Apr 26, 2017 at 1:53 pm

  • Copy link

  You’re welcome :)

• 

  crostiniqueen · Member · Apr 26, 2017 at 2:10 pm

  • Copy link

  If I may bother you for another question (will be the last, I promise)
  Is there a way to bring the logo and the menu button to the same level (in other words: at the top of the screen in one line, horizontally)?
  And if so, that they stick there why scrolling down so they are always visible?

  Let me know if I’m overdoing it with questions….
  I appreciate your help. A LOT!

• 

  garysixtyeight · Member · Apr 26, 2017 at 3:54 pm

  • Copy link

  Try using the css below. It should work for screen sizes below 960px.

  @media only screen and (max-width: 960px) {
  	.is-scrolled .site-header {
  		position: fixed;
  		background: #fff !important;
  		top: 32px;
  	}
  
  	.menu-toggle{
  		top: 30%;
  	}

  }

• 

  garysixtyeight · Member · Apr 26, 2017 at 3:56 pm

  • Copy link

  Apologies, there’s a slight formatting error in the previous comment. Please use:

  @media only screen and (max-width: 960px) {
  	.is-scrolled .site-header {
  		position: fixed;
  		background: #fff !important;
  		top: 32px;
  	}
  
  	.menu-toggle{
  		top: 30%;
  	}
  }

• 

  crostiniqueen · Member · Apr 28, 2017 at 11:34 am

  • Copy link

  Thanks so much for your help! It is much appreciated.

  I tried the code and the logo and the menu button do indeed stick together with the white bar when scrolling.
  However there are the following issues:
  – The white bar containing logo and menu button “jumps” down an inch when I start scrolling; and hence doesn’t stick to the top of the screen.
  – Since the logo and the menu button are aligned vertically the white bar containing them is too broad and covers soo much screen. If the logo and menu button were to be alinged horizontally, the white bar could be reduced in size and it would take away less screen space.
  – Finally it would look amazing if the white bar containing logo and menu button would become slightly transparent during scrolling , like in the desktop version of the site.

• 

  garysixtyeight · Member · Apr 28, 2017 at 1:50 pm

  • Copy link

  Please try using the css below instead.

  If the css doesn’t have the desired effect, please keep it in the customizer so I can troubleshoot it further.

  Thanks :)

  /* Make the header sticky on small screens */
  
  @media only screen and (max-width: 960px) {
  	.site-header, is-singular .site-banner {
  		position: fixed !important;
  		background: transparent !important;
  	}
  
  	/* Reduce the logo heigh to make the header section shorter */
  
  	.site-branding .custom-logo-link img {
  		max-height: 70px;
  	}
  
      /* Adjust the menu toggle size and position */
  
  	.menu-toggle{
  		top: 30%;
  		font-size: 1.2rem
  	}
  
  	/* Prevent fixed header from going underneath the admin bar when logged-in */
  
      .logged-in .site-header, .logged-in .is-singular .site-banner {
  		top: 32px !important;
  	}
  }