Solved Helix Framework

Changing responsive header width

Asked by Alison 3 years ago Last activity 3 years ago

I am using Helixultimate version 2.0.11

on Laptops with smaller screens the menu does not know to collapse to the hamburger menu so the menu items drop into the page content.

This is how it looks on a larger screen which is good ![]https://ibb.co/ZJySgCG

This is how it looks on a smaller laptop screen which is NOT good https://ibb.co/pjTcs2y

Is there some custom code I can use so it knows to become a responsive hamburger menu on a smaller screen.

Once it goes a bit smaller it works OK, but this is a problem for some users.
Thanks

Shemeam

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

3 years ago · edited

Hi Alison,

Read tip 3. from >> https://www.joomshaper.com/documentation/helix-framework/helix-ultimate-2/customization-tips

But on your place I would rather hide search field on smaller screen than swith menu to mobile one.

@media (max-width: 1380px) {
.mod-finder.js-finder-searchform.form-search {display: none; visibility: hidden;}
}

"Search" you can always put as menu item inside "About" or whatever.

2 more replies

Alison Asked this

3 years ago

Thanks Paul

That mostly works, there is still a small size where the search is hidden but the menu still drops below the header section but I will ask the client to test that and see if it works for them.
Thanks for your quick response, much appeciated.
Shemeam :)

Paul Frankowski Senior Staff

3 years ago

You can also reduce space between menu items, also described in guide.