Support Forums

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

Your Time: Our Time:

Overlapping Menu

Featured Lock Resolved
Hi i've been turning off some modules and now the main menu overlaps the main part of the page. How would I fix this?

Thanks!

6 Answers

Toufiq - Staff

More than a month ago #Permalink
Thanks for your query. At first you have to create custom.css and custom.js file. You have to include custom.js file in templates>your template>index.php file. Please see the below

->addJS('jquery.inview.min.js, main.js,custom.js')

1) Add this css in your custom.css file

.sp-sticky-nav-wrapper {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 5px 0 !important;
position: fixed !important;
top: 0;
transition: all 500ms ease 0s;
width: 100%;
z-index: 9999;
}


2) Add this javascript in your custom.js file

jQuery(function($){
var _rys = jQuery.noConflict();
_rys("document").ready(function(){
_rys(window).scroll(function () {
if (_rys(this).scrollTop() > 50) {
_rys('#sp-menu-wrapper').addClass("sp-sticky-nav-wrapper");
$('#sp-menu-wrapper').data('size','small');
} else {
_rys('#sp-menu-wrapper').removeClass("sp-sticky-nav-wrapper");
$('#sp-menu-wrapper').data('size','big');
}
});
});
});


Note : Put css file in your templates css directory and put js file in your templates js directory

Thanks

Alex Smirnov

More than a month ago #Permalink
Hi there,

Could you please provide us with a URL of your web-site to see what's happening with your main menu?

Regards,

Alex

Jackcees

More than a month ago #Permalink
This is one of the pages: http://s476603391.onlinehome.us/index.php/albums So I've been trying to find <section class=" " id="sp-main-body-wrapper"> that I can see in the code in the css ( #sp-main-body-wrapper { background: rgba(246, 180, 74, 0) !important; padding: 30px 0 0 !important;} ) and I want to increase the padding to 160px but I can't find it in any of the files. It says it's inline.

Thanks

Toufiq - Staff

More than a month ago #Permalink
Hi, Thanks for your query. Please remove this code from custom.css file


header#sp-header-wrapper {
position: fixed;
width: 100%;
z-index: 100;
}


Thanks

Jackcees

More than a month ago #Permalink
Sorry, I don't want to remove that from the custom.css. I want the main menu to be sticky. I need to be able to find the inline css code that creates the padding at the top of the #sp-main-body-wrapper.

Thanks


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 103
Sifat

Sifat

Total Accepted Answers: 95
Toufiq

Toufiq

Total Accepted Answers: 36
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

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