We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Missing container-fluid in custom Header section

Featured Lock Resolved Issue
Hello,
I'm using Opus template and need to use a custom Header section instead the default headers.
So I followed this guide but if I set the header section as "fluid width" it doesn't generate a correct output: there is not container-fluid and container-inner divs inside the tag.

This is the correct and original output code with Predefined Headers Opus template:





...


This is the not correct output code with custom header look at here:


...
...

...


How can i fix this, please? Thanks

6 Answers

Sifat - Staff

More than a month ago #Permalink
Hi,
Thanks for your query. I think you are talking about this issue http://prntscr.com/mgshkp. Since you are using custom header that's why it's causing the issue. You can easily adjust the right-left padding of your custom header from the style tab to fix this. http://prntscr.com/mgsge2

-Best Regards

Gianluca Pantaleo

More than a month ago #Permalink
Hi,
Thanks for your query. I think you are talking about this issue http://prntscr.com/mgshkp. Since you are using custom header that's why it's causing the issue. You can easily adjust the right-left padding of your custom header from the style tab to fix this. http://prntscr.com/mgsge2

-Best Regards


Ok, but how can I differet padding for mobile and tablet, please? Thanks

Sifat - Staff

More than a month ago #Permalink
Thanks for your reply. You'll get that option in grid settings. Please check this screencast https://files.fm/u/n83kpjrr

Gianluca Pantaleo

More than a month ago #Permalink
No, I would like to have 40px 80px in large desktop padding header, than 40px 15px in mobile. How can I do this, please? Thanks

Sifat - Staff

More than a month ago #Permalink
Hi,
It actually requires custom css. Please add the following custom css and check.

@media only screen and (max-width: 768px) {
#sp-header {
padding: 40px 15px !important;
}
}
@media only screen and (min-width: 770px) {
#sp-header {
padding: 40px 80px !important;
}
}


Here you'll get all the informations regarding custom css https://www.joomshaper.com/documentation/helix-framework/helixultimate#custom-code
And if you want to edit your code further then here is the link to get to know how this work https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Note: custom support is beyond our support range.

-Best Regards


There are no replies made for this post yet.
Be one of the first to reply to this post!

126

Templates

333540

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us