Archived topic

Trouble with Title (on Mobile)

7 replies · Started by Bob on March 28, 2022

Viewing posts 1–8 of 8

March 28, 2022 at 9:38 am #2170120

Hello,

I'm in the the process of making some changes to my https://gohydrology.org website. I will be making the blog (currently the homepage) into a secondary page. My new title page will be an introduction to the site (https://gohydrology.org/home-2). I was modeling my layout after another website I maintain called Penmanshape (https://penmanshape.org) which really pops.

My problem: On the desktop the new title (and logo) look fine. But on Mobile I can't seem to scale it (i.e. it's too large) and the menu drops down to the second line. I tried to replicate everything on Penmanshape.Org but for some reason I just can't get the desktop and mobile title right on GoHydrology.org.

Do you have any recommendations?

Thank you!

Bob

March 28, 2022 at 9:52 am #2170142

Hi Bob,

Your new site doesn't seem to have the logo too big issue on mobile, but the one you are modeling does:
https://www.screencast.com/t/6sr7eui91EiS

I'm a bit lost, so what are you trying to achieve?

March 28, 2022 at 10:06 am #2170155

Hi Ying,

Just after I typed my question, I went back into the Customizer and turned the "mobile header" on. That had the result of partially resolving my problem. However, now feel the mobile header is too small. I'm afraid to touch it any more because it's sort of acceptable. Still, I was wondering, is there a way to make the mobile header bigger if I continue to keep the "mobile header" on? On Penmanshape (https://penmanshape.org) I have the "mobile header" turned off.

Does that clarify the issue any better?

Thank you,

Bob

March 28, 2022 at 10:13 am #2170167

You can try this CSS with mobile header on:

nav#mobile-header .site-logo.mobile-header-logo img {
    width: auto;
    height: 60px;
}
nav#mobile-header .site-logo.mobile-header-logo {
    height: 100%;
}

Let me know if this helps :)

March 31, 2022 at 4:32 am #2173393

Thanks Ying - I just tried it and it definitely helped. It made the "mobile logo" slightly bigger. I was just curious: Why did the 60px and 100% height settings help - is that different than the default?

Thanks again Ying. I truly appreciate your help.

March 31, 2022 at 10:51 am #2173876

Thanks for asking this question, actually if you are using mobile header, you can set the mobile header height at customizer > layout > primary navigation > menu item height (click on the mobile icon).

The CSS is not needed :)

March 31, 2022 at 12:57 pm #2173986

Thank you so much Ying! That even worked better. Much appreciated!

March 31, 2022 at 1:01 pm #2173989

No problem :)

That's my bad, should've given it a little more thoughts!

Have a great day Bob!

This archived topic is closed to new replies.

Start building better websites today.