Title: logo (header) image full width? Last modified: August 24, 2016 --- # logo (header) image full width? * Resolved [joanna.boj](https://wordpress.org/support/users/joannaboj/) * (@joannaboj) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/) * Hi, * I’d like to have my header/logo image full width, how to achieve that with custom css? Or is the upgrade neccessary for that? * I’d like to have an effect like on this page: [http://www.shadowsatthedoor.com/illustrations/](http://www.shadowsatthedoor.com/illustrations/) * thanks a lot 🙂 Joanna Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/logo-header-image-full-width/page/2/?output_format=md) [→](https://wordpress.org/support/topic/logo-header-image-full-width/page/2/?output_format=md) * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108329) * 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. * Thread Starter [joanna.boj](https://wordpress.org/support/users/joannaboj/) * (@joannaboj) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108356) * 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 * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108364) * 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](http://pics.competethemes.com/3w260I3T3f3Y) * While we’re on the subject, I think you’ll really like the [Tracks CSS Snippets Collection](https://www.competethemes.com/tracks-css-snippets-collection/). It has dozens of pre-written CSS snippets for tweaking and customizing Tracks. * Thread Starter [joanna.boj](https://wordpress.org/support/users/joannaboj/) * (@joannaboj) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108396) * Thanks again! * Yes, I know the snippets collection & loving it. Do you update it with new solutions that come up in this forum? * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years, 1 month ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108409) * 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](https://wordpress.org/support/users/lizsena/) * (@lizsena) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108579) * 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? * [http://blog.senacases.com](http://blog.senacases.com) * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108581) * Liz, * I’m not seeing that when I view your site: [http://pics.competethemes.com/image/2I2f1f230V0Q](http://pics.competethemes.com/image/2I2f1f230V0Q) * Is there a particular screen width or browser where the search icon overlaps the the social icons? * [Liz](https://wordpress.org/support/users/lizsena/) * (@lizsena) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108582) * Actually yes. Once I expand the window past 1500px the search icon overlaps with the email icon. * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108584) * 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](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. * [Liz](https://wordpress.org/support/users/lizsena/) * (@lizsena) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108585) * 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. [http://blog.senacases.com/wp-content/uploads/2015/05/Screen-shot-2015-05-19-at-3.45.25-PM.png](http://blog.senacases.com/wp-content/uploads/2015/05/Screen-shot-2015-05-19-at-3.45.25-PM.png) * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108587) * 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; } } ``` * [Liz](https://wordpress.org/support/users/lizsena/) * (@lizsena) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108588) * Yes it fixed it! Thanks again. * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108591) * Awesome, no problem! * [clayjh](https://wordpress.org/support/users/clayjh/) * (@clayjh) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108622) * 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](http://www.themoderngolfer.com) * clayjh * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [11 years ago](https://wordpress.org/support/topic/logo-header-image-full-width/#post-6108623) * 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. Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/logo-header-image-full-width/page/2/?output_format=md) [→](https://wordpress.org/support/topic/logo-header-image-full-width/page/2/?output_format=md) The topic ‘logo (header) image full width?’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png) * Tracks * [Support Threads](https://wordpress.org/support/theme/tracks/) * [Active Topics](https://wordpress.org/support/theme/tracks/active/) * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/) * [Reviews](https://wordpress.org/support/theme/tracks/reviews/) ## Tags * [full-width](https://wordpress.org/support/topic-tag/full-width/) * [header](https://wordpress.org/support/topic-tag/header/) * 20 replies * 5 participants * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/) * Last activity: [10 years, 9 months ago](https://wordpress.org/support/topic/logo-header-image-full-width/page/2/#post-6108660) * Status: resolved