[Resolved] My site Logo looks NASTY – especially on mobile!!

[steven]

Hey you fine gentlemen of Generatepress.

When I navigate to my site, I cannot help noticing how tacky and unprofessional my Logo looks. (the thing in the top left corner – not the favicon, the logo)

My site

When I go to YOUR homepage, your logo looks great.

The dimensions of my logo are 249 * 35

Can you give me some ideas how to make it look better? I am happy to pay someone to design it on my behalf.

Info I am looking for:

Ideal size. It looks too tall somehow at the moment.
It looks blurry? Don’t know why.
What format should it be? I note yours is an SVG. I presume if I pay someone they could make an SVG.

Basically, I am going to pay a designer to make one but I wondered if you could give me best practice guidelines to make it look as good as possible on my site using your amazing theme.

Thanks a lot!

[steven]

Oh and how do I change the colour of the top bar? I think the black looks weird now.

Ideally, I think the logo and top menu should look something like this. Less tall and with no black background.

Thanks.

[David]

Hi there,

SVG is the best way to go for that kind of logo and will keep the image no matter the size its displayed.
Sizing is really down to the logo design.
As a pointer – For mobile i generally work to to a template size of 180px (w) x 60px (h) for text based logos.

The navigation background color can be changed in Customizer > Colors –> Primary Navigation.

[steven]

In terms of logo design, I don’t want the menu to do this when the screen gets smaller:

I want it all on one line.

I went to Customizer > Colors –> Primary Navigation and changed “navigation background” – nothing happened. The background menu remained black.

When I hit publish, it still remained black.

You mentioned a mobile logo. Are you saying I should have 2 logos then?

Thanks

[Leo]

In terms of logo design, I don’t want the menu to do this when the screen gets smaller. I want it all on one line.

That’s not possible unfortunately as there is simply not enough space for the menu to stay in one line.

You can try increasing the mobile navigation breakpoint so it turns into a toggle earlier if that works:
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[steven]

I think if we get to the bottom of the correct size for the logo, the menu won’t drop the items below the logo.

So to refocus:

1: How do I change the colour of the menu? I did this: Customizer > Colors –> Primary Navigation.

And it did nothing. That changes the hover colour. I want to change the permanent colour.

2: What are the recommended dimensions for the SVG logo? I followed the guidelines within the theme and it looks massive on desktop and comically large on mobile.

Re this :

For mobile i generally work to to a template size of 180px (w) x 60px (h) for text based logos.

So is that the recommended size for mobile on your theme?

But what about desktop? Or should there be just 1 size?

Like I said, I followed the guidelines initially and it looks ridiculous. I want it to be similar in dimensions to the logo on your site.

Can you tell me how to achieve that.

[Leo]

Let’s handle one question at a time.

1: How do I change the colour of the menu? I did this: Customizer > Colors –> Primary Navigation.

That is indeed the correct place. Looks like it’s currently set to #222222 from the code. Is that what the customizer setting is?

If so any caching plugin or server level cache?

[steven]

OK I messed around with the logo and it looks MUCH better. I used the recommended size as per the theme instructions and it looks perfect.

As I thought, the menu is now over to the right on mobile, not shoved down below. The logo was way too big before.

But please – how do I change the top menu’s permanent colour? For the life of me, I cannot see the customise option!

[steven]

I fixed it. I somehow missed the other options.

Anyway, this is sorted now. Thanks!

[steven]

Done

[Leo]

Glad to hear 🙂

[Author]

Posts