[Support request] Placing header search box to right of menu which features in middle

Home Forums Support [Support request] Placing header search box to right of menu which features in middle

Home Forums Support Placing header search box to right of menu which features in middle

Viewing 15 posts - 16 through 30 (of 81 total)
  • Author
    Posts
  • #2181251
    David
    Staff
    Customer Support

    Go to Appearance > Menus, edit or create a new menu and set its Location to Primary Navigation.
    Once thats done you should see your new menu ( after doing the fix above ) – then go to Customizer > Layout > Primary Nav and edit the Menu Item Height and Width to suit your layout.

    #2181270
    robchanoi

    so i should have 2 menu’s under Appearance > Menus?

    I have one menu called Menu 1 and its location is set to primary and canvass.
    In Customizing ▸ Menus Menu 1 location is set to the same: primary and canvass
    This is how it looks – pls see below

    I wld like a canvas menu.

    #2181280
    David
    Staff
    Customer Support

    Are you just wanting the hamburger menu to be displayed ?

    #2181284
    robchanoi

    yes

    #2181286
    robchanoi

    like “categories” here at lelo.com,

    #2181287
    David
    Staff
    Customer Support

    In the Customizer > Layout > Off Canvas Panel: Enable it so it displays for Desktop and Mobile.
    You should now have the full desktop menu and the hamburger menu icon.

    Now go to Appearance > Menus, and create a new blank menu ie. DO NOT add any items to it, and set its Location to Primary Navigation.

    Make sure you have the menu you want displayed with its Location set to Off Canvas Panel.

    #2181320
    robchanoi

    Thanks David, that did it.

    Is it possible to change the size of the hamburger plus is there a way to add padding to the menu canvas tool?, menu text quite near top of menu and then the menu stretches entire page. Can canvas menu height be altered

    And then with the navigation search box – is it possible for that to appear in the canvas menu on mobile? I can use GB i think to customize that for desktop in header maybe?

    #2181343
    David
    Staff
    Customer Support

    1. Hamburger size – Customizer > Typograpy –> Primary Navigation – increase its font size.
    2. This CSS to add some padding to the top of the Off Canvas:

    #generate-slideout-menu .inside-navigation {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    3. Do you want it to resize to the height of the menu ? If so add this CSS:

    #generate-slideout-menu.offside {
        height: auto;
    }

    4. Simplest option here is to Appearance > Widgets and add a Search Block to the Off Canvas Widget area. It will appear below the menu.

    #2181348
    robchanoi

    Awesome, thanks, .. I’ll go thru and report back, cheers

    #2181379
    robchanoi

    Excellent, thanks David, just a couple of outstandings from those:

    1: possible to change width of canvass also?

    2: can search appear at top of canvas? at bottom when you type on mobile (depending on screen size), with mine the keyboard comes up and over the search box so u cant see what u type into it. Think look nicer at top also if doable.

    cheers

    #2181811
    David
    Staff
    Customer Support

    1. Add this CSS:

    .offside--right.is-open, .offside-js--is-right .offside-sliding-element {
        transform: translate3d(-320px,0,0);
    }
    
    .main-navigation.offside {
        width: 320px;
    }
    
    .offside--right {
        right: -320px;
    }

    I increased it to 320px wide as any wider will cause you issues on mobile,
    Also in Customizer > Layout > Off Canvas set the Close button to inside.

    2. Instead of using a Widget, create a new Block Element – Hook, and add the Search Block. Set the Hook to before_slideout_navigation

    #2187051
    robchanoi

    Thanks David, works a treat.

    #2187289
    David
    Staff
    Customer Support
    #2206399
    robchanoi

    Hi – not seeing before_slideout_navigation in: create a new Block Element – Hook, and add the Search Block. Set the Hook to before_slideout_navigation.

    I see after or inside _slideout_navigation – neither appears top of canvass menu or anywheer as far as i can see.

    Should i stick search block in container?

    tks

    #2206414
    David
    Staff
    Customer Support

    Sorry it is the inside_slideout_navigation hook you require. That will place it above the menu items. It may require some CSS to position, which we can assist with once we can see it in place on the site

Viewing 15 posts - 16 through 30 (of 81 total)
  • You must be logged in to reply to this topic.