Header not viewing correctly on laptop screen

[johnno43]

Hi Guys

You’ve helped me before on one of my clients sites http://www.alexandrahazard-soprano.com I’ve got the site title inline with the menu and 2 different fonts in the title. It looks fine on a normal monitor but when viewed on a laptop they separate and the menu drops below.
Is there a way to stop this from happening at all please?

John

P.S im using Elementor if that helps

GP Premium 1.3

[Tom Lead Developer]

Hi there,

This happens because your site title takes up a lot of real estate, so the menu runs out of room on smaller screens.

You can adjust the title font size at specific screen sizes with some CSS:

@media (max-width:1550px) {
    .main-title {
        font-size: 30px;
    }
}

@media (max-width:1190px) {
    .main-title {
        font-size: 25px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnno43]

Hi Tom

Thanks that worked a treat.
The logo is slightly higher than the menu but should be ok

Thanks again
John

[Tom Lead Developer]

You can add spacing to the title with margin-top:

@media (max-width:1550px) {
    .main-title {
        font-size: 30px;
        margin-top: 10px;
    }
}

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts