[Resolved] About Menu

[John]

Hello

Is It possible to set the logo in the middle of off canvas menu and search icon?

Like this website – https://www.thespruce.com/

Thanks

[Leo]

Hi there,

Can you try setting the navigation location to float right?
https://docs.generatepress.com/article/navigation-location/

Then I can try some CSS.

Let me know 🙂

[John]

Done,

Please check now.

[Leo]

Actually try this instead:
https://generatepress.com/forums/topic/centered-logo-with-hamburger-menu-left-and-search-icon-right/#post-691073

[John]

Follow all the instructions.
Working fine on desktop version. But need some work on mobile version.

Could you check please?

[Leo]

Try adding this:

.main-navigation .mobile-bar-items {
    margin-left: auto;
}

[John]

Added,

Could you recheck in mobile version, Is It Okay or need further work?

I’m little confused.

[David]

Hi there,

could you flush and disable autoptimize then i can take a look. You can re-enable it once we have adjusted the CSS

[John]

Done, You can check now.

[David]

So first we need to adjust the position of the logo so edit this CSS:

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}

And change the 90px to 43px.

Then add this CSS:

@media (max-width: 768px) {
    #mobile-header button.menu-toggle {
        padding-left: 10px;
    }
    .mobile-bar-items .search-item a {
        padding-right: 20px !important;
    }
}

[John]

Works Great.

Find one more issue. Please visit any single post. Seems some blank gap between menu and featured image(Only for mobile device). I didn’t notice this issue for the homepage.

[David]

Try this CSS:

.single-post .page-header {
    display: none;
}

[John]

Solved.

Thanks for such great help.

[David]

Glad to be of help

[Author]

Posts