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.

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: http://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.

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.

Liz,

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

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

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: http://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.

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;
  }
}

Awesome, no problem!

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.