Increase Natural Width of Logo Image

• 

  selwyntech · Member · Aug 31, 2015 at 9:32 pm

  • Copy link
  • Add topic to favorites

  I’m using the logo in the Motif theme to display a banner over the header image. I’ve managed to get it positioned where my client wants it, but the problem is that the logo in the Motif theme has a height of 43 pixels directly in the HTML. This causes the image to become very pixelated.

  From reading the post linked below, it seems that you are able and willing to change the HTML to allow the image to display at its full resolution. Would you be able to do this please? The image is currently in the right place, it just needs to display at full resolution.

  https://en.forums.wordpress.com/topic/customize-edin-theme-with-css?replies=3

  Thanks,
  David.

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

• 

  thesacredpath · Member · Sep 1, 2015 at 7:00 am

  • Copy link

  Hi there, it isn’t possible to change the theme php script files to allow for a larger logo image. Have you considered incorporating the logo, and the tagline into the wintery header image you are using? This of course isn’t optimum since the header image scales with browser width.

  I’ve pulled a logo image from the media library and have worked out this CSS. See what you think and let me know. There will likely be adjustments to be made. I’ve limited this change with a media query to 1011px and wider screens/windows since narrower than that the logo disappears and the site text-based site title comes back.

  @media screen and (min-width: 1011px) {
  .site-logo-link {
      height: 242px !important;
      width: 100% !important;
      display: block;
      position: absolute;
      top: 70px;
      background: url('https://mnlbuilders.files.wordpress.com/2015/08/mnl-header-lines-4.png')no-repeat scroll 0 0 / contain transparent !important;
  }
  img.site-logo {
      visibility: hidden;
      height: 242px;
      width: 100%;
  }
  }

• 

  selwyntech · Member · Sep 1, 2015 at 8:21 pm

  • Copy link

  Thanks very much for that solution. It seems so simple now that I see it…

  I did originally try putting the logo and tagline into the header, but as you have noted, the header scales with browser width. It was also proving very difficult to align the menu with the tagline and logo, since I can’t put the menu in the header (for obvious reasons).

  One more thing: As a consequence of having the image 2400 pixels wide (in order for the line continuing off to the right to be visible even on larger screens), the page now has a horizontal scroll bar. Is it possible to cut off the a.site-logo-link element at 100% of its container (div.site-branding)? I’ve tried clip and rect, but neither of them seemed to work.

• 

  thesacredpath · Member · Sep 1, 2015 at 9:47 pm

  • Copy link

  To do this, since we have the .site-logo-link set to position: absolute; , we need to set #page to position: relative; so that the .site-logo-link “position: absolute will be contained within #page. Then we can use overflow: hidden to “chop” the image off at the right edge of #page. Since #page is the full width of the browser window at all times, this means the image will do what you want it to do, but will cut it off at the right edge.

  #page {
      position: relative;
      overflow: hidden;
  }

• 

  captainjag · Member · Sep 1, 2015 at 9:53 pm

  • Copy link

  (When I said I tried clip and rect, that should have been clip and overflow, but it didn’t work.)
  Thanks very much for your help, Richard.

  -David.

• 

  thesacredpath · Member · Sep 1, 2015 at 10:28 pm

  • Copy link

  David, you are welcome.