Width of vertical header

Comments

• Air

  February 2018 edited February 2018 Posts: 10,970

  Hi Rob!
  
  Currently there is none, as too many layout parts are connected to it.
  However for your use I can propose such custom CSS:

  
  /* changeing header width from 280px to 200px */
  .header-vertical #mid {
      padding: 0 0 0 200px;
  }
  .header-vertical #header {
      width: 200px;
  }
  #header #footer {
      width: 200px;
  }
  /* less side space on logo */
  .header-vertical .logo-container {
      padding: 0 10px;
  }
  @media only screen and (max-width: 1024px) {
  	.header-vertical #header{
  		width: 100%;
  	}
  	.header-vertical #mid{
  		padding: 0;
  	}
  }
  
  

  With kind regards.

  Post edited by Air on February 2018
• redwood

  February 2018 Posts: 15

  I just pasted this in the custom CSS box under 'customise'...job done! Wow, great response and support. Thankyou!
• redwood

  February 2018 Posts: 15

  Ah, it almost worked! After adding the custom CSS I noticed that the vertical header got added to the mobile view as well, which clearly isn't what I wanted! Is that a simple fix to the CSS, or did I paste the CSS in the wrong place?
• Air

  February 2018 Posts: 10,970

  Hey:-)
  
  I think you have added CSS in good place.
  However it shouldn't affect mobile view at all. Can you add it again or make screen shot of what you see after adding it?
  
  With kind regards.
• redwood

  February 2018 Posts: 15

  Hiya, I've attached four files. The first two show the desktop version of the site before and after applying the custom CSS; this looks great! The second two files show the mobile version before and after applying the custom CSS; not so great!! The tablet view looks similar to the mobile view...

  

  

  Desktop before custom CSS.PNG

  1378 x 1149 - 611K

  

  

  Desktop after custom CSS.PNG

  1375 x 1146 - 636K

  

  

  Mobile before custom CSS.PNG

  327 x 489 - 59K

  

  

  Mobile after custom CSS.PNG

  325 x 483 - 14K
• Air

  February 2018 Posts: 10,970

  Hi again!
  
  I must say I didn't expect it to break in such way. However I have now updated CSS from my previous post, so it will work now. Thanks for screen shots!
  
  With kind regards.
• redwood

  February 2018 Posts: 15

  All looks good now. Thanks again for the great support