[Support request] Tricky header set up for mobile only

[Iñaki Mansilla]

Hi!.

A customer is asking me to to build a tricky header set up for mobile only. It goes as follow:

All elements inline and sticky menu: Burger menu – Product search – Logo – Login – Shopping cart. It´s the exact same like this example:
https://www.carrefour.es
https://ibb.co/N3ScJrs

I have been reading some topics in the support forum. There are some useful filters like: generate_woocommerce_menu_item_location and generate_inside_secondary_navigation. However even with filters and some interesting stuff from related topics, it seems to me quite a complicate task.

I am not a developer, so I would have to hire one for the customization. In any case, could you guide me thrugh the right approach?…

I have been thinking in a combination of differntet options:

– Logo and User login it´s not a problem. They could be an image on a menu item (I was thinking of using css to show – hide depending if is mobile, tablet or desktop).

– The Shopping cart icon customization it´s not a problem either. I did that already in another project https://www.ianmosh.com

– Product search: If i am not wrong, this topic explains ho to do it:

https://generatepress.com/forums/topic/woocommerce-search-and-product-tags/#post-516086

My main concern is how to separate he menu burguer for the other elements. I am not sure whether to use header widgets, secundary nav or primary in combination with customize developement…

Thanks in advanced!.

[Tom]

Hi there,

My main concern is how to separate he menu burguer for the other elements. I am not sure whether to use header widgets, secundary nav or primary in combination with customize developement…

What do you mean by separate, exactly? Do you have it all set up at the moment so I can take a look? If all the elements already exist, it should be pretty easy to space them out.

Let me know 🙂

[Iñaki Mansilla]

Hi Tom.

I am aiming to have all icons / images floating to the right of burger menu for mobile version, including login user (now is a custom menu item).

Unfortunately I am still working on this project, so is not public… but i could provide a login for you.

Check out this image https://ibb.co/nPhc50p. To the left my set up at the moment. To the right what I am aiming to achive. To the left is the sticky menu logo (it must be like this for desktop), but I wonder if we could change the small version of this logo for mobile.

The small logo is on my media gallery already, but i am not sure wich way to go to finish this.

Thanks!.

[Tom]

Any chance you can send me login details? That way I can provide accurate code 🙂

You can send it here: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks!

[Iñaki Mansilla]

Hi!.

I have just sent it, thanks!.

[Author]

Posts