Archived topic
Changing Primary Header layout for mobile
7 replies · Started by Han on July 18, 2018
Hi there!
I'm trying to experiment with using different primary navigation layouts for desktop and mobile. Right now, I'm using the 'navigation below header' style and would like to change it to the 'float left' style for mobile. How should I go about doing this?
Also, I'm looking at creating a header like this:
https://ibb.co/jVNcDd (desktop)
https://ibb.co/dQOTKJ (mobile)
As you can see, the layout and positioning of elements are different for both devices. Could you advise on how to go about achieving this?
Regards,
Edmund
Hi there,
Have you played with our mobile header option?: https://docs.generatepress.com/article/mobile-header/
We can rearrange the mobile header items to match that quite easily.
Let me know :)
hello!
Totally forgot about that setting.
Thanks a lot Tom! Will try it out.
No problem! Let us know if you need help tweaking it :)
Hey Tom,
Regarding this particular header design - https://ibb.co/jVNcDd -, how would you go about developing it? I'm thinking of using the 'navigation below header' style to achieve the top logo + bottom navigation.
But im not too sure about the 'search' on the left and 'my account' and 'mini cart' on the right.
You could use the Secondary Nav for the navigation on the right, and the header widget for the search on the left.
It will take some custom CSS, but if you'd like to set up the elements and link me to the page, I can help :)
Hey Tom,
Noted. I'll give it a shot. Will let you know if I need further assistance.
Thanks for offering to help! Really appreciate it!!
Ed
No problem! :)
