logo (header) image full width?

Hi Joanna,

Thanks for using Tracks!

Here is the CSS that is currently being used on that site to do this:

.title-info .logo {
  max-width: 9999px;
  max-height: 9999px;
}
#title-info {
  position: relative;
  z-index: 0;
  left: -6.5%;
  width: 113%;
}
.logo {
  width: 100%;
}
.site-header .container {
  max-width: none;
}
#menu-primary {
  max-width: 1280px;
  margin: 0 auto;
}
#title-info {
  float: none;
}
@media all and (min-width: 50em) {

  #title-info {
    margin-top: -1.5em;
  }
}

You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

That should do the trick, but let me know if you need any adjustments.

Ben, thanks a lot, you’re the best ??

One more question, I’ve seen someone ask this, but can’t find the thread – how to turn off the fade-out effect on the header image?

Oh, and btw – is it possible to target css to specific pages (I’ve seen you recommending that for posts), with their id?

thanks,
Joanna

No problem!

Here’s the code for the fade on the logo:

.site-header .site-title {
  opacity: 1;
}

For targeting specific pages, you can always find a class for that on the body element. Your browser has developer tools you can use to quickly find these classes. Here’s a quick vid of how it can be done with Chrome: https://pics.competethemes.com/3w260I3T3f3Y

While we’re on the subject, I think you’ll really like the Tracks CSS Snippets Collection. It has dozens of pre-written CSS snippets for tweaking and customizing Tracks.

Thanks again!

Yes, I know the snippets collection & loving it. Do you update it with new solutions that come up in this forum?

You’re welcome ??

Yea besides a few, it’s sourced entirely from questions that come up here. That way I know I’m adding snippets that people want.

I used this code and the header/logo looks awesome, but now the search icon overlaps the social icons at the top. Is there a way to fix that?

https://blog.senacases.com

Liz,

I’m not seeing that when I view your site: https://pics.competethemes.com/image/2I2f1f230V0Q

Is there a particular screen width or browser where the search icon overlaps the the social icons?

Actually yes. Once I expand the window past 1500px the search icon overlaps with the email icon.

Okay, when I view the site the search icon never overlaps, it just gets very close at exactly 1500px wide. This is because of some code added at that width to help set Tracks’ maximum width for wide screens.

Here’s a quick vid of what I’m seeing for reference: https://pics.competethemes.com/0z3n2A2E3y3U

The social icons could be moved over at 1600px instead with the following CSS:

@media all and (min-width: 1500px){

  .top-navigation .social-media-icons {
    margin-right: 3.75em !important;
  }
}
@media all and (min-width: 1600px){

  .top-navigation .social-media-icons {
    margin-right: 0 !important;
  }
}

Let me know if that fixes the issue, or if you’re seeing something different on your site.

The version you have of our blog in that video looks like how it was earlier today. This is what it looks like now and you can see the icons overlapping. https://blog.senacases.com/wp-content/uploads/2015/05/Screen-shot-2015-05-19-at-3.45.25-PM.png

Hmm that’s weird, I’m seeing the same version as you now.

If you take just the first half of the previous CSS, that should correct the issue now:

@media all and (min-width: 1500px){

  .top-navigation .social-media-icons {
    margin-right: 3.75em !important;
  }
}

Yes it fixed it! Thanks again.

Awesome, no problem!

Ben,

I am trying to make my logo at least 500x x 500px and also increase the size of my “Home/ Previous Posts/Bio” section. Can you help me out?

themoderngolfer.com

clayjh

Sure, you can use the following to remove the size limitations on the logo:

.site-title img {
  max-height: 999px;
  max-width: 999px;
}

And for the primary menu, try the following:

.primary-menu a {
  font-size: 18px;
}

You can increase the 18px value to further increase the size of the menu text.