20-12 lanason.co.uk Shrinking headers on tablet and mobile

• 

  lanason · Member · Aug 6, 2015 at 12:09 pm

  • Copy link
  • Add topic to favorites

  In 20-12 theme – is it possible to automatically re-size the header image to look better on tablets and mobiles.

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

• 

  thesacredpath · Member · Aug 6, 2015 at 6:32 pm

  • Copy link

  This is tricky because you have three elements in your top navigation that you don’t want to overlap. With a photographic or graphic style of header image, this wouldn’t be as much of an issue as it would be more of a “background” to the other header area elements. Change your .site-header CSS rule to the following and then narrow your browser window and look at things on tablets and phones and you will see the challenge.

  .site-header {
      background-color: #fff;
      background-image: url("https://lanason.files.wordpress.com/2015/08/integrity12.png");
      background-position: center top;
      background-repeat: no-repeat;
      background-size: contain;
  }

  Let me know if you have any ideas on what you would like this all to look like on tablets and phones and perhaps we can come up with a solution.

  My only suggestion would be to move the Tel over and under your logo instead of on the right and then move the header image to the right more so things wouldn’t overlap.

  One other suggestion would be to crop your header image very tight on the left and right and then we would have more flexibility in CSS positioning.

  Your site’s looking great though. I really like your colors and things are looking clean and nicely formatted.

• 

  lanason · Member · Aug 6, 2015 at 9:24 pm

  • Copy link

  I’ve put phone no under logo and so removed an element
  and added the code you suggested.
  looks better but doesnt work on mobile
  thinking of combining logo into the background ??

• 

  g471n · Member · Aug 7, 2015 at 6:47 am

  • Copy link

  I think that would be a solution.

• 

  lanason · Member · Aug 7, 2015 at 10:42 am

  • Copy link

  I’ve created a single image for the logo, graphic and phone no
  but the how do i adjust the sizes….

  .site-header {
  background-color: white;
  background-height: 200px; ******doesnt work*******
  background-image: url(‘https://lanason.files.wordpress.com/2015/08/lanasonheader.png’);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: contain;
  height: 40px;
  }

  can I also make the menu bar a bit thinner???

• 

  g471n · Member · Aug 7, 2015 at 10:56 am

  • Copy link

  Try adding.

  .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
      margin-top: 78px;
  }

• 

  lanason · Member · Aug 7, 2015 at 11:23 am

  • Copy link

  perfect – played around with numbers and it looks great
  just need to check what happens on mobiles

  and

  it works – spacing not quite right tho ????

• 

  lanason · Member · Aug 8, 2015 at 5:48 pm

  • Copy link

  help on this final bit of formatting would be useful

  how to i remove the padding on the menu bar ???

• 

  g471n · Member · Aug 9, 2015 at 1:39 pm

  • Copy link

  Hi, it doesn’t actually seem to be padding all. I will let you know if I manage to figure it out …

• 

  thesacredpath · Member · Aug 10, 2015 at 6:51 am

  • Copy link

  Hi, I would suggest limiting this change using a media query to screens/windows wider than 600px. Below that, the touch menu activates and the changes to the normal menu are carrying over and into that touch menu. We can also include a second media query to position the menu button on screens/windows narrower than 600px. Remove the code @g471n gave and replace with the below and see what you think.

  @media screen and (min-width: 600px) {
  	.main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
  		background: #3cc;
  		margin-top: 65px;
  	}
  }
  
  @media screen and (max-width: 599px) {
  	.main-navigation {
  		margin-top: 70px;
  	}
  }

• 

  lanason · Member · Aug 10, 2015 at 8:31 pm

  • Copy link

  mmm didnt seem to work on my ipad mini

• 

  thesacredpath · Member · Aug 11, 2015 at 6:48 pm

  • Copy link

  Ok, this all gets a bit tricky, and where Media Queries are placed can be important. Typically I suggest they are always placed at the bottom of the custom CSS. I would move what I had given you to the bottom of your custom CSS and then add the following below that to get the spacing correct when the menu goes to two lines.

  @media screen and (min-width: 600px) and (max-width: 900px) {
  	#main {
  		margin-top: 50px;
  	}
  }