Header not resizing with browser

• 

  chrisgidd1 · Member · Jul 27, 2015 at 3:55 pm

  • Copy link
  • Add topic to favorites

  I am using TwentyTwelve theme and adding a few CSS customisations including positioning of my header and menu. I think I have got these wrong. My header image and menu look great and resize well in Safari on my MACBOOK and IPAD. However, on a PC using IE, the header does not resize with the browser and the menu disappears. any suggestions?

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

• 

  thesacredpath · Member · Jul 28, 2015 at 6:39 am

  • Copy link

  Hi, add max-width: 100% to your .site-header > a rule so it looks like this.

  .site-header > a {
      position: absolute;
      top: 20px;
      max-width: 100%;
  }

  When you narrow your browser window you will notice that a gap forms between your header image and the menu. This is the result of having to use position: absolute; to move the header image. It ends up losing its relationship to the other page elements and essentially floats freely above the rest of the page. You can add a number of Media Queries to adjust the gap at various screen/window widths.

• 

  chrisgidd1 · Member · Jul 29, 2015 at 7:47 pm

  • Copy link

  Thank you as always. You are so responsive..very helpful.

• 

  thesacredpath · Member · Jul 30, 2015 at 9:34 pm

  • Copy link

  You are welcome.