I think you know that isn’t related to customizr, and you should ask this to mega-menu plug-in forum.
Anyway a quick solution could be:
-You can see this media query in http://www.castellalun.com/wp-content/plugins/mega_main_menu/src/css/cache.skin.css
@media (min-width: 768px){
#mega_main_menu.direction-horizontal > .menu_holder.sticky_container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
border-radius: 0px;
z-index: 2000;
line-height: 0px;
text-align: center;
}
}
What if you put the following in your customizr child theme style.css:
#mega_main_menu.direction-horizontal > .menu_holder.sticky_container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
border-radius: 0px;
z-index: 2000;
line-height: 0px;
text-align: center;
}
This way you will get the same behavior also for width < 768px .
But this is just an hack, maybe you should change something else ..
Thanks for the reply.
Sorry, I just assumed this was a Customizr issue as I’ve had trouble with white gaps at the top when I was still using their slider.
I put in the custom CSS you recommended in and it does work, the only problem is when you scroll down you can see another version of the menu beneath it. If I could get rid of that the problem would be solved.
I’m at a bit of a loss with this one.
Thanks again
Update: With a bit of fiddling I’ve managed to get the gap to appear BELOW the menu instead of above it which is much better. It’s a white gap roughly the size of the menu itself with a grey line at the bottom
But I’m wondering is there are way to get rid of it altogether?
I’m guessing the gap/grey line is a part of the Customizr heading but when I take code out, I end up breaking it.
Mmm I can’t see this other menu as I scroll the page…
I just went to your page and I don’t see the css I gave you applied, why? because of that problem your removed it?
Anyway I repasted the code in your style.css (using a firefox plug-in) and looks like it works, I cannot see this problem scrolling the page…
http://it.tinypic.com/r/907qy9/8
I still have your CSS in the Custom CSS. Here is the problem (although now a lot less of problem, thanks to you!) I’m getting. This is on Chrome and also the same on my iPhone.
http://www.castellalun.com/example.jpg
The gap does disappear upwards when you scroll.
One last update – the gap seems to be where the logo and tagline are supposed to go. I’m hoping there is some CSS to hide it or someone knows what code to remove.
Oh I see, since you’re not using customizr header at all try this:
.tc-header.clearfix.row-fluid {
display: none;
}
And if you want back that grey border under the sticky menu add this property:
border-bottom: 10px solid #e9eaee;
to
#mega_main_menu.direction-horizontal > .menu_holder.sticky_container
inside the brackets, for example, below text-align: center;
Hope this helps.
But probably you don’t want a fixed menu in mobile versions.. think about it and will try to find a solution if you want.
That code did the trick brilliantly! Thanks so much for your help with this 🙂
You’re welcome, I’m glad you solved.
