Header and Logo in mobile view

[Rebecca Morency]

Hi Bill,

I’ve been using m. for mobile sites and just switched to the responsive available on your Bottega designs.

On http://bedbreakfastinsurance.com/, the logo is perfect on desktop, but itty-bitty on the mobile view.

How do I fix this on the mobile view? (There’s no additional code that could be causing this.)

—

On http://pestmanagementinsurance.com/, there’s a large gap of header color between the logo and the menu.

Is there any way to reduce this for the mobile view?

Here’s the code that you helped me with for the pest management desktop:

#header {
height: auto;
}

#logo,
#text-logo {
position: relative;
top: auto;
left: auto;
text-align: center;
width: 100%;
height: 99px;
}

#logo img,
#text-logo img {
max-height: 100%;
}

#navigation {
float: none;
display: inline;
width: 100%;
margin-top: 10px;
}

#navigation ul {
float: none;
text-align: center;
}

#navigation .menu li {
display: inline-block;
margin-left: 30px;
float: none;
}

Thanks for your help.

Regards,

Becky

[Bill Robbins]

Hi Becky,

Good questions. Images are set to scale down as they reach the dimensions of their container. That often works adequately, but can sometimes make details difficult to spot like the logo.

One way to approach that would be to hide the default logo on smaller screens and load in a new one. Here’s how you could do that with CSS:

1. In your WordPress dashboard click on the media section and upload the logo you’d like to use on smaller screens. You’ll want something that’s closer to square than the original logo so it doesn’t get too small on mobile.
2. Once the upload is finished, select that image. WordPress will give you some details about it. Copy the file URL. We’ll need that in a minute.
3. Go to your theme options page and choose the Advanced tab.
4. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 767px) {
   
   	#logo p,
   	#logo h1 {
   		display: none;
   	}
   	
   	#logo:before {
   		content: url(https://yoursite.com/image.png);
   	}
   	
   	#logo {
   		padding-top: 15px;
   	}
   
   }
   

   Replace the http://yoursite.com/image.png in that snippet with the URL to the image you just uploaded.

5. Update your settings.

That should swap out the image for you when the screen gets to be 767 pixels wide or smaller. You can change the point at which that happens by changing the 767 in the snippet above to a larger/smaller number.

---

For the other site, let’s do this:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-width: 767px) { 
   
   	#logo p,
   	#logo h1 {
   		margin-bottom: 0;
   	}
   	
   	#logo {
   		height: auto !important;
   	}
   
   }
   

3. Update your settings.

If you run into any questions or trouble, let me know.

Have a great week,
Bill

[Rebecca Morency]

Worked like a charm for the first site. I tried a square and it was too big, so I tried a 275×50 rectangle with same background color and that looks great.

On the second one, the code shrunk the logo to itty-bitty. So I tried doing the same thing as the first and I still get the extra gap of background color. I’ll live with with the gap until I change the main page logo.

Thanks for the help.

You have an even better week.

Becky

[Bill Robbins]

Happy to help out. If you run into trouble when you change out the main page logo, let me know 🙂

[Author]

Posts