Archived topic

Header not viewing correctly on laptop screen

3 replies · Started by johnno43 on June 8, 2017

Viewing posts 1–4 of 4

June 8, 2017 at 12:59 am #330329

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

June 8, 2017 at 6:43 am #330450

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;
    }
}

June 9, 2017 at 2:30 am #330938

Hi Tom

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

Thanks again
John

June 9, 2017 at 10:27 am #331145

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 :)

This archived topic is closed to new replies.

Start building better websites today.