Multi Rows predefined header issue - Forum | JoomShaper
Solved Helix Framework

Multi Rows predefined header issue

Asked by Andrea 4 years ago Last activity 4 years ago

Hi,
the predefined header "multi rows" works right on desktop but not on tablet or smartphone. Here I need only the bottom row but the top one still remains.
![https://tinyurl.com/yyjuowsk]

I tried

@media (max-width: 580px) { 
#sp-header-topbar {margin: 0; display: none !important;}
#sp-header-topbar .container-inner > .row {min-height: 0;}
}

as suggested in other tread and the code works smooth on mobile but not on tablet. If I try to replicate the same code with "max-width: 991px" nothing happens: which is the breakpoint between desktop and tablet in HU2?

I also added this code in custom css:

#sp-header-topbar .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 10px;}

in order to remove the middle line and give more room to the centred logo.
Thanks for helping

Andrea

Accepted answer

Marked as the solution
Andrea Asked this
4 years ago 
@media (min-width: 992px) {
#sp-top .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;}
}

this solved!

13 more replies

Oldest first Newest first Most helpful
Toufiq Senior Staff
4 years ago

Hi there,

Thanks for contacting us. Sorry for the inconvenience. Will you please provide me the Joomla administrator access to check the issue? I will check & get back to you soon. 

-Thanks

Andrea Asked this
4 years ago

Hi Toufiq,
here you are, thank you

Andrea

Toufiq Senior Staff
4 years ago

Please provide me the Super administrator access

Andrea Asked this
4 years ago

You are Super User

Toufiq Senior Staff
4 years ago

Please check now and let me know. Thanks

Andrea Asked this
4 years ago

Moving the max-width to 480px worked on my devices.
Thank you

Andrea

Toufiq Senior Staff
4 years ago

Does solved your issue?

Andrea Asked this
4 years ago

My issue is solved, but a new problem came up: there are no top/bottom margin/padding in header any more as you can see here ![https://tinyurl.com/y4pqcq3q]

The code 

#sp-header-topbar .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;}

in custom CSS is useless and so the header high = 80px has no response (it's always 60px)

What did you actually do?
Thanks

Toufiq Senior Staff
4 years ago

Add this css code inside your custom.css code 

#sp-top .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;}

Note: I have added avobe css code and it works fine

Andrea Asked this
4 years ago

Hi, this css code in custom.css

#sp-top .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;}

works fine on desktop, but affects the issue on tablet and smartphone, even if I add the other code as you suggested:

@media (max-width: 480px) { 
#sp-header-topbar {margin: 0; display: none !important;}
#sp-header-topbar .container-inner > .row {min-height: 0;}
}

Tablet and smartphone are fine only when the first code is not in custom.css.

Log in to reply.