[Support request] custom content to the mobile/header area

[Johannes]

Hi, I am using the code snippet and some custom content to the mobile/header area. I have used this CSS:

.mobile-header-content {
float: left;
padding: 20px;
}

.menu-toggle {
text-align:right!important;
}

I am not able to have the content and the menu icon on same horizontal level.

regards
Johannes

[Leo]

Hi there,

Can you provide a link to your site?

Thanks!

[Johannes]

Hi, pls take a look here, ( the site is only for testing purpose ):

http://www.johannesoedegaard.com/generatepresstest/

[Leo]

Hmm I would try turning off mobile header feature then just use this CSS:

@media(max-width: 768px) {
    #site-navigation {
        clear: none;
        background: transparent;
        z-index: 500;
        position: relative;
    }

    .site-branding {
        display: block;
        float: left !important;
    }

    .site-logo {
        float: left !important;
        clear: none !important;
        max-width: 70%;
    }

    button.menu-toggle {
        width: auto;
        float: right;
    }
}

[Johannes]

Hi, thank you for the code, but what I wanted to achieve was what written here:

Adding HTML Inside the Mobile Header
https://docs.generatepress.com/article/mobile-header/

In the future I may need this function, but then the mobile menu symbol ( hamburger ) must be able to show up on top and to the right.

– Johannes

[Leo]

You would need a mobile header logo, which should be quite small, instead of the site title and description for it to look good.

The toggle is default on the right of logo with mobile header.

Let me know if this helps.

[Johannes]

ok, thank you, BUT then it should not be presented as an option. I mean what is written here:
https://docs.generatepress.com/article/mobile-header/

-regards
Johannes

[Leo]

No problem!

Some people would have a logo specific for mobile so the option is there.

We appreciate the suggestion! 🙂

[Author]

Posts