Docs

[Nicksowders]

centex.nicksowders.com

i have the theme set to fixed menu but it is scrolling up on mobile devices and would like it to be fixed. ive tried copying and pasting code from past topics on this site with luck but and am having more complications. the red part at the top of my site is a creative cta which get pushed up behind the menu when i try to css the menu to fix it on mobile. also is there any javascript code to shrink back the menu once a category is clicked?

[Nabeel A]

Hi there,

Thanks for writing in! The mobile menu is fixed in mobile devices, to fix the creative-cta positioning, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px){
.x-creative-cta {
   top: 45px !important;
}
}

Let us know how this goes!

[Nicksowders]

when it first loads theres a 45px gap and it falls behind an image that was designed to be below it. once i scroll up it resets and sits in the correct place, but them the img is still too high and over lapping the cta.

[Paul R]

Hi,

I would like to check but the url provided above no longer works.

Kindly provide us your new site url.

Thanks

[Nicksowders]

ok url is fixed. sorry about that.

[Lely]

Hi There,

Please update this:

@media screen and (max-width: 979px){
.x-creative-cta {
   top: 45px !important;
}
}

To this:

@media screen and (max-width: 979px){
.x-creative-cta {
   top: 45px !important;
    z-index: 9;
}
}

CTA will be on top of the image. If you don’t want overlapping, use this instead:

@media screen and (max-width: 979px){
.x-creative-cta {
   margin-top: 45px !important;
}
}

Hope this helps.

[Nicksowders]

works great thank you very much!

[Nicksowders]

anyway to get the menu to collap back after you click a link? with the javascript?

[Rue Nel]

Hello There,

Thanks for updating in! To get the menu to collapse after you click a mobile menu link, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.x-navbar .x-nav-wrap.mobile a').on('touchend click', function(){
    $('.x-nav-wrap.mobile').toggleClass('in').css('height', 0);
    $('.x-btn-navbar').toggleClass('collapsed');
  });
})(jQuery);

Please let us know if this works out for you.

[Author]

Posts