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

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.

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.

Are you just wanting the hamburger menu to be displayed ?

yes

like "categories" here at lelo.com,

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.

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?

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.

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

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

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

Thanks David, works a treat.

Glad to be of help

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

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