[swiftaParticipant]

Hello !

This theme is amazing and its really great to have such great support for this theme. Im am having some trouble trying to make the nav bar for mobile sticky at the top. It works great on desktop but i need it to work on mobile devices like your demo.

Thank you !

[RadModerator]

Hi Swift,

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

[swiftaParticipant]

Oops forgot to give that to you.

http://grenitavantgarde.com

I also was wondering if you could give me a few tips or help me with the page speed and load time of this website. It seems a little slow and take more that a few seconds to load. I have been optimizing the images but didn’t know if there was something more I could do. I really appreciate you getting back to me! Thanks

-Swift

[Paul RModerator]

Hi Swift,

Thank you for providing the url.

To make the nav bar sticky at the top on mobile.

1. Go to customizer page.
2. Click on the custom tab located at the bottom of the left sidebar of the cusomizer page.
3. Input these css code on the css field.

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}

4. Don’t forget to save & publish.

With regards to page speed. Try installing this plugin http://wordpress.org/plugins/w3-total-cache/

[swiftaParticipant]

Thank you ! one more thing when you click on the menu dropdown for mobile.. And when you click on one of the on page links to bring you to the section the menu remains open. Is there a way i can click on one of the section links and have the menu close (slide back toughener) while bringing you to that section of the page. right now it stays open and obstructs the view of the website.

Thanks again!

Swift

[ZeshanMember]

Hi Swift,

You can achieve this by adding the following JS code in Customizer > Custom > JavaScript:

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

Hope this helps. 🙂

Thank you.

[jotapesParticipant]

Hello, thanks for sharing this information above.

I was able to get the navigation to be fixed at the top as you instructed, but the javascript on your last reply didn’t work for me. Any chance you can help me out with this?

Here’s the link: reardencapital.staging.wpengine.com

My css looks like this:

@media (max-width: 979px) {
   .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed !important;
        top: 0;
        z-index: 99;
    }
}

Thanks in advance!

[Paul RModerator]

Hi,

You can try this code instead.

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

Hope that helps.

[Mark_westcottParticipant]

Tried this code and sticky nav on mobile works. Thank you.

The javascript to close the menu once an item is selected isn’t working right though. It works just great inside a desktop browser, reduced to only show mobile view (so on test seemed to work), but on an actual mobile (iPhone 6) the menu stays open.

Please help. Thanks!

[Mark_westcottParticipant]

nevermind. the last javascript suggestion from this thread https://community.theme.co//forums/topic/mobile-menu-doesnt-close-when-selecting-scroll-link/ worked great.

[LelyModerator]

Hello Mark,

Glad that you figured this out.
Let us know if you need anything else.

Cheers!
X

[TipMasterParticipant]

This is great! Can you give us code to do the same for the widgetbar, so the nav and widgetbar are sticky together in mobile view just like in desktop?

(I have an idea to put table of contents inside the widgetbar to help with long articles, but it is no help unless the widgetbar is also sticky. It’d also need to close itself after the page scrolls to whatever heading the user chooses)

[RupokMember]

Hi @tipmaster

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[TipMasterParticipant]

Since we can’t upload screenshots, please see on SkyDrive here: http://1drv.ms/1J3XNac

1-Unscrolled.png
2-Scrolled+stickynav.png
3-Scrolled+stickynav+stickywidgetbar.png

Images (1) and (2) are screenshots. This thread gave me the code to make the navbar sticky, as in (2).

Image (3) shows what I would like to happen if you can give me the code. That is, the widgetbar becomes sticky along with the navbar, as shown highlighted inside the red square.

Thanks for taking a look.

[ThaiModerator]

Hi @tipmaster,

Would you mind providing us with your website URL so we can take a closer look?

Many thanks.

[Author]

Posts