[Support request] Mobile Header Optimization

[DJ]

Hello, Please advise on how I can make the adjustments to my site so that the mobile view appears in example 1 below. Example 2 is what my site looks like.

Thank you.

Example 1 – https://imgur.com/lUiEYGQ

Example 2 – https://imgur.com/pYPh2xl

[Ying]

Hi DJ,

Give this css a try:

.site-logo.mobile-header-logo img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

Let me know 🙂

[DJ]

Hello Ying, I have a basic understanding of WordPress. Where do I add this code at on my site. Thank you.

[Ying]

I should’ve mentioned it 🙂
Adding CSS: https://docs.generatepress.com/article/adding-css/

[DJ]

I found where to put the code. Thanks for the info. However, I’m still trying to achieve the desired effect of having my picture in the middle of the page with the words centered aligned over the top of the image. Similar to the setup of https://imgur.com/lUiEYGQ. The code you provided worked for the log, but not the header image. Please advise.

[Ying]

Any chance you can link us to the site in question?

It’s hard for us to help without seeing the code.

You can use the private information field.

Let me know 🙂

[DJ]

Ok. I have provided the details in the private info filed.

[Ying]

I can see the user name and pw, but no website link?

[DJ]

My apologies! Totally forgot.

[Ying]

No worries!

Try to set the page hero background position to left top.
https://docs.generatepress.com/article/header-element-overview/#background-image-position

And to center the logo in mobile view, edited css here:
https://generatepress.com/forums/topic/mobile-header-optimization/#post-1595042

Let me know 🙂

[DJ]

Hey Ying, Moving the settings to top left did the trick. Thanks! Is there a way to adjust the text for the mobile view without affecting the standard view? I’m trying to keep the text centered and with one line of text per row. Similar to the text on the second line in this image. https://imgur.com/3D4wZwr

[Ying]

Yes, the text font size can be adjusted only in mobile with media query:

@media (max-width: 768px) {
    .page-hero .inside-page-hero h1 {
        font-size: 19px; 
        margin-bottom: 30px; 
    }
}

Let me know 🙂

[DJ]

Ying, it Worked great. What line of code would I need to add to move the text down the page and move it toward the right?

[Ying]

It actually doesn’t require css, you can adjust it in Page hero > Padding (click the mobile icon):
https://docs.generatepress.com/article/header-element-overview/#padding

Increase the left and top padding, reduce the right and bottom padding as the screenshot below.
https://tinyurl.com/ycpztoyb

Let me know 🙂

[DJ]

Thanks Ying! I’ll have to play with the numbers to get the desired effect, but I should be able to find the right combination.

[Author]

Posts