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

[robchanoi]

Hi,

Right now enabling the navigation search places it to the right of the primary menu which I have set to appear in middle of header.

I raised this a while back and was advised under premium this maybe possible, however I’m not seeing a way of achieving this thru customization.

Specifically for desktop and tablet, for mobile it would have to feature within navigation panel I’m assuming.

Thanks if you can advise.

[David]

Hi there,

i am not sure i fully understand the requirement.

Do you have a screenshot of a mockup of what you want displayed on desktop ?

[robchanoi]

Here you are – https://menspleasures.com/wp-content/uploads/2021/05/mp-search.png
Pressing search icon: https://menspleasures.com/wp-content/uploads/2021/05/pressing-search.png

[Tom]

Hi there,

The first step I’d take is to use the Navigation as Header option: https://docs.generatepress.com/article/navigation-as-a-header/

Then if you’re able to activate the navigation search option we should be able to provide some simple CSS to achieve the layout.

Let us know 🙂

[robchanoi]

Thanks Tom, had a fiddle. Still places search icon as before. No worries if unachievable through current set up. I’d ideally like a white rectangular search box to appear within the top right of the header. Any compatible menu pluguin recommendations welcome.

[David]

I am sure its doable – if you can enable the navigation search then we can take a look at the CSS required.

[robchanoi]

hi David – apologies on 2 fronts, getting round to finishing this and last post on measure.

Well, I have created new menu in appearance – menus and assigned it to off canvas.

In customizer – menus, have checked box box off canvas and checked it as primary menu as only menu i have created.

In customizer – layout – sticky nav have turned sticky nav on – transition none and uploaded sticky image, a white hamburger icon on transparent background.

In customizer – primary nav, i have set navigation location to float right.

Navigation search is disabled for now as per your advice before.

Would like hamburger to appear top right. Do not want to set up a mega menu but one that features like the “categories” canvas layout vertical button at lelo.com/, but top right for now.

Can’t seem to get the uploaded hamburger icon to appear first off before setting search navigation somehow.

any light shed wld be great, thanks.

[Fernando]

Hi Robchanoi,

To confirm, are you referring to this?: https://share.getcloudapp.com/yAuK0vXp

If so, may you kindly go to Appearance > Customize > Layout > Header and set the Header Preset as such: https://share.getcloudapp.com/xQuqjg4X

Reduce the Header Padding as well.

Kindly let us know how it goes. 🙂

[robchanoi]

Thanks Fernando,

Actually for a different site but this does help – thanks.

However – positioning the search function I’m having difficulty with.

Is it possible to center it for it to appear above 3-bar-nav on desktop or in 3-bar-nav at top on mobile?

Right now can’t get 3barnav and search to appear on homepage on site I have left link to below.

cheers

[David]

I am not seeing the navigation on the latest URL you provided ?

[robchanoi]

yup – i can’t get it to appear.

Have created one menu in appearance-menu
In customizer – menu have assigned this menu to off canvas menu
In customizer – colors – canvas menu nav have set backgound to white
In customizer – layout have enabled desktop and mobile canvas menu.

nothing appearing in homepage
when trying to enable search – that also won’t show on homepage.

edited

[David]

In Customizer > Layout > Primary Nav – what is its Location ?

[robchanoi]

float right

[David]

Ok..
If you edit the Header Element you have on the site, on its Site Header tab, is the Primary Nav location different there ?
It should be set to default

[robchanoi]

ahh, have done but came out looking like this – have disabled for now

[Author]

Posts