[Resolved] About Menu

Home Forums Support [Resolved] About Menu

Home Forums Support About Menu

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #950325
    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

    #950561
    Leo
    Staff
    Customer Support

    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 🙂

    #950570
    John

    Done,

    Please check now.

    #950604
    Leo
    Staff
    Customer Support
    #950639
    John

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

    Could you check please?

    #950772
    Leo
    Staff
    Customer Support

    Try adding this:

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

    Added,

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

    I’m little confused.

    #951028
    David
    Staff
    Customer Support

    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

    #951076
    John

    Done, You can check now.

    #951080
    David
    Staff
    Customer Support

    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;
        }
    }
    #951096
    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.

    #951261
    David
    Staff
    Customer Support

    Try this CSS:

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

    Solved.

    Thanks for such great help.

    #951295
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.