Solved Templates

Helium ultimate - Adjusting the content on the browser window or device

Asked by Andreas Wolf 2 years ago Last activity 2 years ago

If the browser window is reduced or enlarged, the content is adapted accordingly (responsive design). You can see the adaptation when you change the size of the browser window.

I noticed that there are problems with two positions.

  1. if the browser window is between approx. 990px - 1200px wide, the menu no longer looks good.

  2. from a width of the browser window of 1400px, the content jumps out to the left and right. The distance to the edge of the page is then too small.

The best thing to do is to try moving the browser window yourself while looking at my page.

How can these problems be solved?

Best Regards
Andreas

Accepted answer

Marked as the solution
Paul Frankowski Senior Staff
2 years ago

Also in this same manual / guide there is tip how to switch to [=] menu faster.

To help mobile/tablet users you can also publish for them (smart)search module in Offcanvas menu.
https://www.joomshaper.com/documentation/helix-framework/menu-navigation#module-positions-inside-the-mobile-menu

Then inside Offcanvas Menu box visitors will get : Logo (?) + Menu items, Social (if you enabled/need them) + Search field to make research. I don't know how many people use it, but they will have that option.

4 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
2 years ago · edited

Hi Andreas,

This is simple math. And tip for that you can find in Helix documenation >> https://www.joomshaper.com/documentation/helix-framework/customization-tips

Two Extra Tips!
The easier way would be to remove long search bar from the header and just use menu item "Suche" with component view. OR You can hide it only on smaller screeen using Custom CSS, example for inspiration purpose:

@media screen and (max-width: 1140px) {
#sp-menu  .mod-finder.js-finder-searchform.form-search { display: none;}
}

Unfortunately for all of us the menu does not magically wrap on smaller resolutions so you have to consider a compromise solution. Think about that.

Andreas Wolf Asked this
2 years ago

Hello Paul,

thank you very much for your help!

I have now deactivated the boxed layout. This solves the 2nd problem.
For the first problem with the search bar I used your CSS code. However, if you now visit our site with an iPad (landscape-mode), you no longer have a search function.

It would be nicer if the menu in the header is switched off at smaller than 1200px and the canvas menu is activated. How does that work?

THANK YOU!

Best Regards

Andreas

Andreas Wolf Asked this
2 years ago

I have already activated the search field in the canvas menu. By deactivating the search field in the header menu below 1200px, tablets in landscape modus no longer have a search field.

If you rotate the tablet (portrait mode), then the page is under 990px wide. This deactivates the menu in the header and activates the canvas menu with search field.

This means that between 990px and 1200px, no search field is available to the visitor.

My solution would be to deactivate the menu in the header from 1200px and activate the canvas menu accordingly. How can I implement this?

Log in to reply.