Top Banner – how to link with Homepage (CSS)

• 

  etfalpha · Member · Oct 20, 2014 at 9:54 am

  • Copy link
  • Add topic to favorites

  Dear WordPress Experts,

  What CSS code structure do I need to link my Top Banner with homepage?

  Do I need to do that via the following syntax?
  #topbanner { what code do I need here }

  Thank you in advance for your help!
  Bart

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

• 

  thesacredpath · Member · Oct 20, 2014 at 5:40 pm

  • Copy link

  Bart, you cannot use CSS to directly add a link to the top banner image, but we can turn the site title transparent and then move it down and on top of the header image and size it so it covers it entirely.

  First off, remove this from your custom CSS.

  #header {
      display: none;
  }

  Then add this and see what you think.

  #header {
      padding: 0;
  }
  #header #logo .title {
      position: absolute;
      width: 96%;
      padding: 0;
  }
  #header #logo .title .site-description {
      display: none;
  }
  #navigation, #header #search_menu {
      display: none;
  }
  #header #logo .title .site-title a {
      border: medium none;
      color: rgba(0, 0, 0, 0);
      width: 100%;
      display: block;
      line-height: 2;
  }
  #header #logo .title .site-title a:hover {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  }

• 

  etfalpha · Member · Oct 21, 2014 at 9:09 am

  • Copy link

  Thank you for your CSS code so much. Looks good, that’s what I need. However, is there a way to keep the menu below the banner?

• 

  thesacredpath · Member · Oct 21, 2014 at 5:21 pm

  • Copy link

  Oops, sorry, what a difference a comma can make. :)

  Remove the rule I mentioned above and then add the following instead.

  #header {
      padding: 0;
  }
  #header #logo .title {
      position: absolute;
      width: 96%;
      padding: 0;
  }
  #header #logo .title .site-description {
      display: none;
  }
  #header #search_menu {
      display: none;
  }
  #header #logo .title .site-title a {
      border: medium none;
      color: rgba(0, 0, 0, 0);
      width: 100%;
      display: block;
      line-height: 2;
  }
  #header #logo .title .site-title a:hover {
      background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  }

• 

  etfalpha · Member · Oct 22, 2014 at 8:50 am

  • Copy link

  You are a Magician! Thank you for your help! :)