How to put header and title on same line in Triton Lite theme

• 

  ginab13 · Member · Jan 14, 2015 at 6:21 pm

  • Copy link
  • Add topic to favorites

  Is there a way to put the header logo AND the title in the same horizontal space — IE. logo on LEFT in header and title on RIGHT?

  I’d like to keep the subtitle/tagline under both.

  Thanks!

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

• 

  thesacredpath · Member · Jan 15, 2015 at 4:02 am

  • Copy link

  The logo would have to be a lot smaller than you have it now. Are you talking about a different image than the wide red/white CSU image at the top right now?

• 

  ginab13 · Member · Jan 15, 2015 at 6:41 am

  • Copy link

  Yes – I would significantly shrink that logo, but that is the one that would be used.

• 

  thesacredpath · Member · Jan 15, 2015 at 7:11 pm

  • Copy link

  Take a look at this. First of replace your #logo with the following

  #logo {
      background: url("https://csueii.files.wordpress.com/2015/01/logo_csu1-e1421222623102.jpg") no-repeat scroll 0 0 / 55% auto rgba(0, 0, 0, 0);
      display: block;
      height: 35px;
      padding-bottom: 0;
      padding-top: 150px;
      width: 899px;
  }

  and add this at the very bottom of your custom CSS

  #logo h1 {
      position: absolute;
      right: 0;
      top: 15px;
      width: 45%;
  }
  #header .container {
      position: relative;
  }
  #logo h1 a {
      text-align: left;
  }
  .desc {
      position: relative;
      top: -65px;
  }

  If this works for you, you will need to edit your CSS and make some position adjustments for the menu and slider element (blue line) to lessen the gap between the logo/title/site description.

• 

  ginab13 · Member · Jan 15, 2015 at 7:30 pm

  • Copy link

  Worked like a charm! Thank you!

  Very last thing… I am having trouble removing the space created by this adjustment between the menu bar and the rest of the homepage. Can you help me remove that space? I’ve fooled with all of the numbers I thought were relevant in the CSS padding areas.

• 

  thesacredpath · Member · Jan 16, 2015 at 3:49 am

  • Copy link

  Change your #masthead to look like this:

  #masthead{
  	display:block;
  	position:absolute;
  	top:151px;
  	height:34px
  }

  and then change the #logo I gave you to this

  #logo {
      background: url("https://csueii.files.wordpress.com/2015/01/logo_csu1-e1421222623102.jpg") no-repeat scroll 0 0 / 55% auto rgba(0, 0, 0, 0);
      display: block;
      height: 0;
      padding-bottom: 0;
      width: 899px;
      margin-bottom: -20px;
  }

• 

  ginab13 · Member · Jan 16, 2015 at 7:44 am

  • Copy link

  This is great. There’s still a little bit of space, but it works! Thank you so much for your time. I appreciate it!!

• 

  ginab13 · Member · Jan 16, 2015 at 7:56 am

  • Copy link

  Doh! Wait… now the menu does not work. It is not clickable, and there are no submenu dropdowns. Any suggestions?

• 

  thesacredpath · Member · Jan 16, 2015 at 8:01 pm

  • Copy link

  Hi, I noticed that and answered you here: https://en.forums.wordpress.com/topic/shrinking-slideshow-gallery?replies=2#post-2217605 ,

• 

  ginab13 · Member · Jan 16, 2015 at 8:52 pm

  • Copy link

  THANK YOU!!!!!!!!!!!!!!!!! :)

• 

  thesacredpath · Member · Jan 17, 2015 at 2:04 pm

  • Copy link

  You are welcome.