Balasana Header width

• 

  guycaronrimouski · Member · Sep 7, 2021 at 8:54 pm

  • Copy link
  • Add topic to favorites

  I am currently using Balasana theme (Premium plan). I edited the css to have a background color on my site header. However the color only fills a block of content and I cannot make it full width. Is there any CSS code I could use to make the site header full width? Thanks!

• 

  storygenie5 · Member · Sep 7, 2021 at 9:28 pm

  • Copy link

  To learn more about theme customization, you can head over to https://wordpress.com/themes

• 

  aisajib · Member · Sep 8, 2021 at 3:49 am

  • Copy link

  Hi there!

  You can add the following CSS code to change the header background on your Balasana theme (Make sure to change the color code on background: #5ae5da; on the first block of code).

  /* Header background */
  #masthead {
  background: #5ae5da;
  width: 100%;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  }

  
  @media only screen and (min-width: 560px) {
  #masthead {
  padding-left: calc((100vw – 544px) / 2);
  padding-right: calc((100vw – 544px) / 2);
  }
  }

  
  @media only screen and (min-width: 640px) {
  #masthead {
  padding-left: calc((100vw – 624px) / 2);
  padding-right: calc((100vw – 624px) / 2);
  }
  }

  
  @media only screen and (min-width: 782px) {
  #masthead {
  padding-left: calc((100vw – 766px) / 2);
  padding-right: calc((100vw – 766px) / 2);
  }
  }

  
  @media only screen and (min-width: 1024px) {
  #masthead {
  padding-left: calc((100vw – 1022px) / 2);
  padding-right: calc((100vw – 1022px) / 2);
  }
  }

  Please note that your WordPress.com Premium plan gives you access to email support. If you need more help with your site, please go to https://wordpress.com/help/contact to reach out to us via email.

  Regards