Help widening the header on Yumblog

• 

  javolmert · Member · May 8, 2014 at 2:35 pm

  • Copy link
  • Add topic to favorites

  I have a custom header image that was made for my site, and I want to change the width of my header area. Thank you!

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

• 

  thesacredpath · Member · May 8, 2014 at 4:50 pm

  • Copy link

  Hi, the width of the inner header div is 1120px, and that includes the search at far right. I see a header image in your media library that is 1250px x 213px. Is that the one you are wanting to use? I’ve used that image and use the background-size contain attribute to get it to fit in the available space. See what you think of the following. I also fixed your white menu labels which were not showing with your white background.

  #header #headimg {
      background: url("http://afmdotusdotcom.files.wordpress.com/2014/05/afm-web-banner.jpg") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
      height: 213px;
      max-width: 1120px;
      width: 100%;
  }
  #header #headimg img {
      visibility: hidden;
  }
  .tertiary-actions {
      display: none;
  }
  #header .menu a {
      color: #756E6C !important;
  }
  #header .menu a:hover {
      color: #FFFFFF !important;
  }

  If you narrow down your browser window, you will see that the space between the menu and the header image grows as you narrow. You can also add the following media queries which will adjust that gap at various window/device widths and then play with things and see what you think.

  @media screen and (max-width: 1024px) {
      #header #headimg {
          height: 180px;
      }
  }
  @media screen and (max-width: 900px) {
      #header #headimg {
          height: 160px;
      }
  }
  @media screen and (max-width: 768px) {
      #header #headimg {
          height: 140px;
      }
  }
  @media screen and (max-width: 480px) {
      #header #headimg {
          height: 90px;
      }
  }

• 

  javolmert · Member · May 8, 2014 at 4:55 pm

  • Copy link

  The image that I was wanting to use has the logo off to the left and the wording centered. Does that make a difference? Do I need to plug something else in for that?

• 

  javolmert · Member · May 8, 2014 at 4:59 pm

  • Copy link

  You had the right image in there! I updated and that looks great! Should the font for the menu’s be black? Take a look and see what you think.

• 

  thesacredpath · Member · May 8, 2014 at 5:13 pm

  • Copy link

  Woohoo! Looks good.

  On the menu, you can change it to black. Looking at it now, I think that would look better. To do that, in the following rule, change the color code to #000000.

  #header .menu a {
      color: #756E6C !important;
  }

• 

  javolmert · Member · May 8, 2014 at 5:25 pm

  • Copy link

  Great!!!!! Thank you so much! I really appreciate all the help! Couldn’t have done it without you!

• 

  thesacredpath · Member · May 8, 2014 at 7:09 pm

  • Copy link

  No problem, and you are welcome.