Logo in mobile (responsive) view stretched and menu on top of it

Hey Josue,

Thx for the fast response!!

Your code takes care of the distortion of the logo and the mobile menu is now on the right of the logo, so far so good.

However…half the logo is cut off at the bottom.

Do you also have a fix for that?

Sincerely,
Morticka

Hi Josue,

Again, thx for your superfast AND helpful response!! The logo looks fine now, very happy with that. :D

I have two more questions though:

1: How can I style the logo in responsive mode? I would like the logo on the left, it’s center aligned with the center of the menu icon and the menu icon has to move a little to the right. It seems that the entire width in responsive mode has to expand. If you look at 99u.com in responsive mode, that’s the effect I’m trying to obtain. A simple header and using more mobile screen width for content.

The past couple of days I’ve been experimenting with different header choices, trying to solve the problem myself, but I’m at my wits end :)

2: I would like the secondary menu not show up in responsive mode, but in the menu icon list. Do you know how to accomplish this?

Sincerely,
Morticka

Hi Josue,

Thx again for helping. The width in responsive view is perfect!
About adding another class: I know how to do this in html, but in php files, not so much. :)

Question 1: Where do I find the menu items, in which document do I paste the duplicate and do I add another class?

I am using a child theme.

Question 2: And actually I would like the entire top (secondary) menu gone in responsive view, including the social media buttons (with the links in the menu button in responsive view ofcourse)

Question 3: And is there a way to align the logo in responsive view with the menu button? Right now it’s bottom aligned, but I’d like it to be center aligned?

Sincerely,
Morticka

BRILLIANT!! You are brilliant Josue, the menu works as I envisioned it, thank you so very much!!!! :D

Sincerely,
Morticka

Hi Josue,

I forgot to test the landscape mode on mobile!

The logo in landscape mode is blown up and blurry, the column width is to small and the menu icon floats on top of the logo.

Do you have a fix for that too, so it looks the same as it does in portrait mode, or maybe the way it looks on a tablet if there is enough space? :D

Sincerely,
Morticka

• This reply was modified 10 years, 4 months ago by Morticka.

Thx Yigit! The logo and menu icon are okay again :D

But the content is not responsive, it’s still the same width as in portrait mode? How can I fix that?

Sincerely,
Morticka

• This reply was modified 10 years, 4 months ago by Morticka.

Hi Yigit,

Nice, it looks a lot better in landscape view, but in portrait view the width is now smaller. How do I turn the portrait view back to the width before these last changes?

Sincerely,
Morticka

Hi Yigit,

I tested the code, but the width in portrait mode did not change.

I tried this:
@media only screen and (max-width: 767px) {
.responsive .container {
width: 90%;
}}

It looks okay in portrait mode now, but ofcourse now it also stretches in landscape mode. I think I’ll leave it like this for now.

The logo still looks blurry, especially in landscape mode. Any idea how I can make it to look crisp like the text?

Sincerely,
Morticka

Hi Yigit,

I uploaded the logo again with a resolution of 300ppi and it still looks blurry in landscape mode on the smartphone!

Do you have any idea why it that is?

Sincerely,
Morticka

Hi Yigit,

With a resolution of 300ppi it was already to big and it does not look right in the overall design on desktop, so I scaled it in Illustrator, still in 300ppi resolution and uploaded it in wordpress. It looks better on the desktop, but still blurry, as well as on mobile.

I have two test sites running on different servers and I have the same effect on both. I have absolutely no clue what causes it?

Sincerely,
Morticka

Hi Yigit,

No, I don’t have a retina device :) Have not started testing on those yet.

Your logo does look better though. I’ve looked at the resolution and it’s a lot higher then my logo, which is to my surprise the standard web 72 ppi. I obviously keep making the same mistake; editting the logo in 300 ppi and then saving it in 72 ppi!! So I’m havng a little “duh” moment right now ;)

So, this time I saved my logo in 300ppi, uploaded it as logo and then downloaded the image again to see if WordPress made any changes to the resolution…and it still looks blurry compared to the crisp text. (I work with photoshop and illustrator)

I would not know what else to do.

Sincerely,
Morticka

Hi Yigit,

Correct, that’s what I said. Your Pinterest logo has a resolution of 149 something, my logo has a resolution of 299 now. If you check the website you see it’s still blurry.

Sincerely,
Morticka