Docs

[Nuera]

I’m trying to replicate the X Landing Page at http://theme.co/x/

1) I’ve got just about everything looking correct, but I haven’t figured out how to get my mobile menu to go up versus down (which ruins the layout effect on mobile). Seems like that’d be a quick fix.

2) I’m also interested to know if it’s possible to achieve a ‘Drop Up’ effect on desktop if the masthead is nested at the bottom of the screen? Forgive my wonky nomenclature… hahah

[Friech]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[Nuera]

This reply has been marked as private.

[Paul R]

Hi,

1. You can add this under Custom > Edit global CSS in the Customizer.

/* make menu go up */
@media (max-width: 979px) {
body .x-navbar {
    bottom: 0;
    position: absolute;
    width: 100%;
}
}

2. You can add this under Custom > Edit global Javascript in the Customizer.

jQuery( function($) {    
$(window).on("scroll", function () {    
if($(window).scrollTop() == 0) { 
       $('.desktop .sub-menu').css('top','auto');
       $('.desktop .sub-menu').css('bottom','90px');
} else {
    $('.desktop .sub-menu').css('top','90px');
    $('.desktop .sub-menu').css('bottom','auto');
}
}).scroll();
});

[Nuera]

HAHAhahah… I gotta say, that was impressively perfect.

Thank you SO MUCH!

[Prasant Rai]

You are most welcome. 🙂

[Nuera]

Ok, last questions on this, regarding mobile:

1) On the X Theme example (http://theme.co/x), the menu expands up when nested along the bottom. But after the user scrolls down, it reveals below. I have that working perfectly on the desktop experience, but it’s only expanding up on mobile.

2) I’d also like to make the mobile menu fixed once the user scrolls down. I would’ve thought that option would live in the customization menu, but if it does I can’t find it.

Thanks in advance!

[Rue Nel]

Hello There,

Thanks for the updates. To resolve #1 and #2, please add the following css code in the customizer, Appearance > Customize > Custom > CSS at the very end of your other custom css.

@media (max-width: 979px) {}
  .x-navbar.x-navbar-fixed-top{
    position: fixed;
    top: 0;
    bottom: auto;
  }
}

Please let us know if this works out for you.

[Nuera]

PERFECTO!

You guys are the best… <heart>

[Thai]

Glad we were able to help 🙂

If you need anything else please let us know.

[Nuera]

So this shoooould be the last thing, I’m guessing. But now that we’ve made those changes to the desktop/mobile nav menu on the homepage, the more static pages are being affected too.

It’s only the homepage that we’re looking to affect with the specialized navigation, and the rest of the pages on the site should work traditionally with the masthead fixed to the top, and the dropdowns expanding below.

How would I fix that, while maintaining all the updates we’ve already committed to the homepage?

[Paul R]

Hi,

To make it work only in your homepage, please replace the js code given above with this.

jQuery( function($) {    
   $(window).on("scroll", function () {    
    if($(window).scrollTop() == 0) { 
       $('.home .desktop .sub-menu').css('top','auto');
       $('.home .desktop .sub-menu').css('bottom','90px');
    } else {
      $('.home .desktop .sub-menu').css('top','90px');
      $('.home .desktop .sub-menu').css('bottom','auto');
    }
  }).scroll();
});

Then replace the code in your custom > css with this

@media (max-width: 979px) {

 .home .x-navbar {
    bottom: 0;
    position: absolute;
    width: 100%;
 }

 .home .x-navbar.x-navbar-fixed-top{
    position: fixed;
    top: 0;
    bottom: auto;
  }
}

Hope that helps.

[Nuera]

This reply has been marked as private.

[Nuera]

Amazing. That’s rad. You’re rad. Viva La Themeco!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts