[Resolved] (left) Hamburger menu / Centered logo / search (right)

Home Forums Support [Resolved] (left) Hamburger menu / Centered logo / search (right)

Home Forums Support (left) Hamburger menu / Centered logo / search (right)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1823507
    Ezra

    I’d like to re-create this layout:

    (left) Hamburger menu / Centered logo / search (right)

    I’ve done some research, and came across this article which gets me halfway there, but not quite. Currently what I have works pretty good for mobile, but on desktop it’s kinda crude. Clicking on the menu messes up the layout, and moves the search icon to the left. Ideally, clicking on the menu should just dropdown a little menu, just like the site in the illustration above does.

    Thanks in advance!

    #1823559
    Ying
    Staff
    Customer Support

    Hi Ezra,

    Try this CSS:

    @media (min-width: 769px) {
        #site-navigation.toggled div#primary-menu {
            position: absolute;
            top: 54px;
            z-index: 999;
        }
    }
    #1824602
    Ezra

    Wow, perfect! Thanks so much! Another quick question: the search field jumps over to the left when I click the search button. How do I make it behave a little more naturally? I guess it’s OK on mobile, but on the desktop it’s a bit unhandy.

    #1824668
    Ying
    Staff
    Customer Support

    Are you trying to shorten the search field? If so, try this CSS:

    form.search-form.navigation-search.nav-search-active {
        display: flex;
        justify-content: flex-end;
    }
    .navigation-search input[type="search"] {
        width: 300px;
    }
    
    #1824690
    Ezra

    Awesome, with a little tweaking that worked admirably! Thanks again! πŸ™‚

    Can I put in a feature request that GP apply some default styles to the search function? Currently, clicking the search icon brings up a blank white box with nothing to indicate that it’s an input box other than a blinking cursor.

    #1825587
    Ying
    Staff
    Customer Support

    We’ll definitely consider it if there’re more similar requests πŸ™‚

    #1827106
    Ezra

    One more request for the menu. Is it possible to make the mobile menu close by clicking anywhere outside the menu? Currently, the only way to close the menu is to click directly above it on the “X MENU” button.

    #1827774
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic for a separate question?

    Thanks πŸ™‚

    #1827897
    Ezra

    As I was creating a new topic, the suggested results pointed me to the answer! Thanks. πŸ™‚
    (Here’s the answer, in case anyone else is interested: https://generatepress.com/forums/topic/close-mobile-menu-when-click-tap-outside/#post-1567805)

    #1828748
    Leo
    Staff
    Customer Support

    Glad to hear πŸ™‚

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