[Resolved] Mobile Header

[Janine]

Hi, guys.

When I go to Layout > Header > Mobile Header and choose Enable, I get the hamburger menu.

But when I Disable I get this:

https://drive.google.com/open?id=1TmLSr7f8d7A2IV0UiqJKtciw7fc19WNk

The site title (which is 66px) is smaller than the tagline (which is 20px). I don’t like how this looks. Is this something I could fix with Elementor?

Link to demo site: efc21c12.ngrok.io

Thank you!

[Leo]

Hi there,

What’s the preferable solution?

You can make the font size bigger on mobile with this CSS:

@media (max-width: 768px) {
    .main-title {
        font-size: 50px;
    }
    .site-description {
        font-size: 40px;
    }
}

[Janine]

Hi, Leo.

I tried this and nothing happened.

Please see my link to demo site: efc21c12.ngrok.io

Thank you.

[Janine]

I suppose the site title could stay the same. It is the tagline that is too large.

Is there any way I can control the font size of both so that I can play around until it looks right? Thank you.

[Janine]

Also, additional CSS in the Customizer is telling me that there are two errors. Thank you.

[Leo]

It should work but again I’m not seeing it being added.

Edited the CSS above so the tagline is included.

You will need to fix the CSS mistakes – it’s stopping the CSS from being executing.

[Janine]

Hi, Leo.

I used the edited code above and that did the trick, except that I’m still getting this error:

Expected LBRACE at line 99, col. 5.

It is flagging the period before main-title.

What should I do?

Thank you.

[Janine]

And I just noticed that it change the size of the tagline when I’m in Desktop view. (Site title still seems to be the 66px I set in Typography.)

See link to demo site: efc21c12.ngrok.io

Thank you.

[Leo]

Edited the code above to correct the syntax error: https://generatepress.com/forums/topic/mobile-header-7/#post-494901

[Janine]

Thanks, Leo.

[Leo]

No problem!

[Author]

Posts