There are countless WordPress themes out there, and unfortunately not all are fully responsive to support mobile layouts. However, even some of the most beautiful responsive themes are sometimes displaying your logo in a way that it overlaps the navigation on tablet or mobile devices. This broken layout affect many websites at times, but fortunately is very easy to fix. Many websites don’t even have a Responsive Logo on their websites, even though the theme is fully responsive.

How To Make Your Logo Responsive

If you are using one of our Podcast Themes, for example the Tusant WordPress Theme, you can easily change the logo width via the “Appearance > Customize” screen, where you’ll find separate options both for the regular logo, mobile logo, and sticky navigation logo.

Fixing Your Mobile Responsive Logo on WordPress

Fortunately, there’s a really easy fix for that – All you have to do is to determine the CSS class or ID of your logo, and limit it’s width, only on mobile devices. Here’s some CSS code you can add into the main style.css file:

@media screen and (max-width: 767px) {
 body #logo {
   max-width: 90%;
   display: block;
 }
}

(Make sure to use the proper ID or class for your logo, so it actually works correctly on your site. If you don’t know the class or ID, you’ll have to use your browsers ‘Inspect Element’ tool, which is available for all major browsers, and look around to find the exact class or ID that needs to be used. The #logo ID that is mentioned above is just an example, so it cannot work for every website, since many are using a different ID for their logo container or logo image.)

The same principals could also be used for the navigation, and you can restrict spacing between menu items, font size or any other setting you need by using the CSS @media queries.

Remember – A Responsive Logo can also fix your mobile and tablet navigation. The header are that contain the logo and navigation is the first part your visitors see, so it’s important to have a responsive logo and navigation set up!