Multi Rows Predefined Header Issue - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Multi Rows Predefined Header Issue

Andrea

Andrea

Helix Framework 3 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

0
14 Answers
Order by
Oldest Newest Votes
Andrea
Andrea
Accepted Answer
3 years ago #45695 
@media (min-width: 992px) {
#sp-top .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;}
}

this solved!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45329

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

0
Andrea
Andrea
Accepted Answer
3 years ago #45345

Hi Toufiq, here you are, thank you

Andrea

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45397

Please provide me the Super administrator access

0
Andrea
Andrea
Accepted Answer
3 years ago #45408

You are Super User

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45423

Please check now and let me know. Thanks

0
Andrea
Andrea
Accepted Answer
3 years ago #45432

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

Andrea

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45471

Does solved your issue?

0
Andrea
Andrea
Accepted Answer
3 years ago #45515

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

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45546

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

0
Andrea
Andrea
Accepted Answer
3 years ago #45661

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.

0
Andrea
Andrea
Accepted Answer
3 years ago #45666

This in custom.css

#sp-top .container-inner {border-bottom: 0px;  padding-top: 30px; margin-bottom: 30px;} 
@media (max-width: 480px) { 
#sp-top .container-inner {padding: 0px; margin: 0px;}
}

works on desktop and mobile but not on tablet. Any seggestion?

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45667

sp-header-topbar this class name changed with the sp-top

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #45710

Glad to know that your problem has been solved. Will you please spend some to write a review about our product and support quality? 

https://extensions.joomla.org/extension/sp-page-builder/

0