Archived topic

GeneratePress Header (for Mobile)

7 replies · Started by Sumit on June 11, 2021

Viewing posts 1–8 of 8

June 11, 2021 at 8:34 pm #1819320

I'm using default GneratePress header on my site BloggingLift.com

It's looking good on the desktop. But on the mobile devices, Menu and Search Icon are showing below the website logo.

How to align logo, menu and search icon in the same line in the mobile device?

Please share the CSS code for this which I can add in the additional CSS section.

Waiting for your reply. Please help me.

June 11, 2021 at 9:16 pm #1819336

Hi there,

Can you first edit this CSS you've added:

.main-navigation .site-logo.navigation-logo img {
    height: 50px;
    margin-top: 15px;
    margin-left: 10px;
}

To this so it's desktop only?

@media (min-width: 769px) {
    .main-navigation .site-logo.navigation-logo img {
        height: 50px;
        margin-top: 15px;
        margin-left: 10px;
    }
}

June 11, 2021 at 11:38 pm #1819396

after adding this code, It alined everything in the same line.

But LOGO is not showing on Mobile Device. Please check and reply immeditaly.

June 12, 2021 at 6:33 am #1819604

Hi there,

did you resolve this as i can see the Logo on mobile

June 13, 2021 at 12:40 am #1820253

Actually, I replaced it with old CSS because It was not showing logo in the mobile devices.

June 13, 2021 at 10:15 am #1820736

Can you add my CSS in so I can see the issue?
https://generatepress.com/forums/topic/generatepress-menu-for-mobile/#post-1819336

Please clear and disable your caching plugin when we are trying to help.

Thanks!

June 13, 2021 at 10:39 am #1820764

Hello Leo, I again added that custom CSS.

The logo is showing But Menu & Search bar is still showing below the logo.

I want the Logo, Menu & Search bar in the same line.

Please Open Blogging Lift on a mobile device and check it.

Thanks in advance

June 13, 2021 at 10:47 am #1820770

There isn't a great solution here as the main issue is that the logo image is simply too wide for a mobile screen.

I would say add this CSS:

@media (max-width: 768px) {
    .main-navigation .navigation-logo img {
        width: 200px;
        height: auto !important;
    }
}

Then remove the mobile menu label to save some space:
https://docs.generatepress.com/article/mobile-menu-label/

This archived topic is closed to new replies.

Start building better websites today.