responsive view and errors in main menu and media query - Forum | JoomShaper
Awaiting an answer Helix Framework

responsive view and errors in main menu and media query

Asked by Martin Seidl 4 years ago Last activity 4 years ago

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.

  1. I want to influence when/at which width it jumps to mobile menu (sandwich menu)
  2. also the main desktop menu jumps into next line at aournd 1080px
  3. at 1085px width the menu bar gets less height....and so on....I am really confused

2 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago · edited

  1. You can use the following media query:

    @media (max-width: 1024px){
#offcanvas-toggler {
display: flex !important;
}
.sp-megamenu-parent{
 display:none !important;
}
}

  2. 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;
}

  3. 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

Martin Seidl Asked this
4 years ago

thnx so far.

Log in to reply.