Responsive header problem

Responsive header isnt working ok , i have this shop button in top left and it doesnt go with responsive way , also the navigation doesnt go responsive way. How i can fix this?

Hi Jimi,

Thanks for reaching out.

May I know what mobile device you’re testing it with? Every element has minimum width especially with content, so it could only respond to the specific size. With your setup, you must display a mobile menu earlier (breakpoints) so it would give more space for the button. Like display mobile menu for the laptop since your header is too wide, or remove some menu items.

Thanks!

i was just testing with my normal browser in my macbookpro , started make browser window smaller and there came these breakingpoints where the button is shown only half and also some navi links didnt show full, is there a way to set the points when it changes to menu for tablet and then menu for phone?

Hey There,

The key to creating your desired layout in Pro’s Header and Footer builders is understanding Flexbox. We have a tip for that here. It would also be best you know the interface well so I’d recommend you watch the Header and Footer introduction here.

  • You can achieve responsive design with Flexbox but you need to understand how it works. That would require some time to understand so what you could do here is utilize the Hide During Breakpoints option to hide your section and create a new one for mobile which you will then hide on desktop and laptop views.

Hope it helps :slight_smile:

that tip link is not ok? or is hidden?

where is possible to set the points when normal header goest to mobile header. I would like to assing my normal header with button on top right to be shown on laptops/desktop and when the screen size goes to smaller than those then automaticly have mobile menu for tablets and smaller? how to do that ?

Also where i can ad my mobile menu / header or edit that 1?

Hi,

In addition to your Navigation Inline Element, add Navigation Collapse Element

For example

Then Set you Navigation Inline element to be visible only in desktop

and set your Navigation Collapsed element to be visible only in mobile.

Kindly review the links provided by my colleague.

https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378
https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks

Hi, I cannot locate navigation inline from my settings? I only want to show my full header/nav with desktop/laptop and all smaller screens i want to show the mobile menu.

Hi Jimi,

Inline Navigation element is the menu you have for desktop, what you need to do now is hide that on mobile. To do that, inspect the Inline Navigation element, under its customize tab, see Hide During Breakpoints options, hide your Inline Navigation element on extra large and large screen, to make the effect that your Inline Navigation element and mobile menu is switching.



Learn more about Hide During Breakpoints here.

Hope it helps,
Cheers!

Finally found it when i realised how i find my mobile menu settings. Thx .

Glad you’ve found the solution.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.