Make Digital Pro Logo Smaller

As we use Digital Pro Theme by StudioPress as our main themes. We like to share how to make the Logo smaller than it’s default size.

In default size, the logo looks way way too big for our eyes. And we feel a big logo is too intimidating to site visitor.

So, here we only using CSS only to make Digital Pro Logo size smaller and looks more catchy.

Use CSS to make Logo size smaller

To make Digital Pro themes logo smaller place the CSS code below to built-in CSS editor in WP Customizer.

.header-image .site-title > a {
  background-position: center center !important;
  background-size: contain !important;
  float: left;
  min-height: 70px;
  width: 140px;
}

By tweaking the header image width to the smaller size. In this case is 140px. It makes the logo become smaller on desktop view.

But the problem is, it will look awful on the smaller screen (Mobile view). Since in Digital Pro the header-image and site-title ar wrapped together it will make the header logo automatically float to left.

So here’s how to reverse the CSS code without loose the default position of Digital pro Header on Mobile view.

@media only screen and (max-width: 800px) {

  .site-inner {
    margin-top: 0;
 }

  .content-sidebar .content,
  .content-sidebar .sidebar,
  .footer-widgets-1,
  .footer-widgets-2,
  .footer-widgets-3,
  .header-image .site-title > a,
  .js .genesis-nav-menu .sub-menu,
  .js .genesis-nav-menu .sub-menu a,
  .sidebar-content .content,
  .sidebar-content .sidebar,
  .site-header {
    width: 100%;
  }
  .header-image .site-title > a {
  background-position: center center !important;
  background-size: contain !important;
  min-height: 34px;
  margin-top: 10px;
}
}

So what we do here is just make the header-image and site-title min-height to 34px. And add 10px margin top to make it have space with the top edge.

By doing this it will make the logo position still in the center. And not float to left,

And yeah! it works 🙂

Note & conclusion

That’s how our simple trick to make Digital pro logo size smaller.

We choose Digital Pro theme by StudioPress is because of it simplicity. Overall is matching with our ‘Brand’ btw.

But, a huge logo is not for us. So we shrink the size. Hope this trick useful for you people who also use Digital Pro Theme and need to make the logo size smaller.

If you are using any other Genesis child theme other than Digital Pro this trick may work too.

Of course, you’ll need to make the width and the height match with your style.

Ok, till next post about StudioPress & Genesis theme. Peace out!