Responsive View And Errors In Main Menu And Media Query
Martin Seidl
Hi Team, i am really tired after many hours trying around. see https://www.alpenverein-aibling.de/tourenprogramm.html It is helix framework on Joomla 4 and after update of helix framework and plugin some things got mixed up.
i would really appreciate if someone could clarify how to set up in custom.css (mine is named extra.css) media query that dont conflict with template media queries.
- I want to influence when/at which width it jumps to mobile menu (sandwich menu)
- also the main desktop menu jumps into next line at aournd 1080px
- at 1085px width the menu bar gets less height....and so on....I am really confused
Rashida Rahman
Accepted Answer-
You can use the following media query:
@media (max-width: 1024px){ #offcanvas-toggler { display: flex !important; } .sp-megamenu-parent{ display:none !important; } } -
As you have col auto set for your logo and menu column so you need to decrease your menu item font size, and/or padding among them to get them fixed. Sample code for you:
@media (max-width: 1080px){ .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-size: 12px; } -
You have added the following code in your css file:
@media (max-width: 1085px) #sp-header { height: 70px; padding-top: 5px; }This cade causing your header height reduced at 1085 resolution. Please check the following screenshot: https://prnt.sc/_-5fNcs_sTk8
for your logo image height too: https://prnt.sc/RKwCbyZdn1Ok
If you remove the code then it will be fine I hope!
Best Regards