Logo And Menu Overlap When Changing Resolution
Mindsugar
Hey Guys,
it´s me again. I have a problem concerning the mainmenu which overlaps the leftside logo when changing screen resolution. I appended a video to show exactly what I mean. https://mindsugar.de/help/menuprob.mp4
I hope you can help me out. Best solution would be that with downsizing resolution the menu moves to the right and never ever overlaps the logo.
Thanks for your help.
Paul Frankowski
Accepted AnswerHi Mindsugar,
Why? Becuase you set col-6 + col-sm-6 + col-md-6 for logo column. Please read on Bootstrap 5 documenation what is and how works Grid then you would know.
It's a simple math! Without it we all lost. Summary of columns must be 12.
If logo column and menu has 50% of width - there is NO space for all menu items to display on one row when you reduce size of screen, using popular resolutions 1280px, 1440px etc.
How to fix it? Easy, reduce column size for logo and increase size for Menu column. From Template Options > Layout > Header > Columns Options > Grid > Desktop (larger/smaller).
https://www.joomshaper.com/documentation/helix-framework/layout-builder
Mindsugar
Accepted AnswerHey Paul,
your explanations helped me a lot to understand the basic concept, that lies behind the Layout. Thanks for that. I managed to achieve my goals now by choosing one of the predefined Layout instead of the one I built. I tried to get it working with my own but I suppose I´m still missing some bootstrap basics that are prerequisite to make it work like intended. I´ll be working on that. ;) Anyway - with the predefined layout it works just perfect and I´m glad. :)
Thanks,
Ras