[Aaron PParticipant]

On our site spiritofthedawn.com – we have a semi-extesnive menu with dropdowns. ON mobile devices if you open a dropdown it might not all fit and it won’t let you scroll down. Seems a bit tricky to navigate. Any ideas?

[SenthilMember]

Hi there,

Thanks for writing in!

Please paste the below CSS code in your Appearance > Customize > Custom > CSS and it will remove the stickiness of the menubar in mobile.

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

Hope it helps, thanks!

[Aaron PParticipant]

THat didn’t seem to do anything. ANy ideaas?

[Nabeel AModerator]

Hi Aaron,

Replace the previous code in Appearance > Customize > Custom > CSS:

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

Let us know how this goes. Cheers!

[Aaron PParticipant]

that did it! thanks!

[Paul RModerator]

You’re welcome! 🙂

[SebamoeParticipant]

Hey there!

I had the same problem and the last code fixed it; however now of course the navbar disappears when scrolling down. Any advice how to keep it sticky when scrolling, e.g. a code snippet that makes the position relative only when the menu is open and fixed as soon as it’s closed?

Thanks so much, also for the great theme!

[RupokMember]

Hi @sebamoe

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.

[SebamoeParticipant]

Thanks for getting back!
This is the website I’m working on: http://www.sebastianmoeferdt.com/
I removed the conflicting “position: relative” code for now, so now the mobile nav is sticky, but not scrollable (causes problems on mobile landscape mode).
Another issue: The scrollspy doesn’t seem to work for the mobile nav – the current item is not being highlighted. Any idea on this?
Thank you!!

[SebamoeParticipant]

Hi,

I worked my way around the nav-scrolling issue with horizontal alignment of the menu items, however I still can’t get the mobile scroll spy to work. Any chance you can help out?

Thanks!

[John EzraMember]

Hi there,

Thanks for updating the thread! Upon checking your site, we find that you have X and Cornerstone updated. Are you using VC on this site, please update it to the latest version. If you still have x-shortcodes installed but just deactivated. Please delete it completely. If that doesn’t fix the issue, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[SebamoeParticipant]

This reply has been marked as private.

[JackKeymaster]

Hi there Sebastian,

Thanks for providing the additional information.

I’ve just been looking into this for you, the scrolling with the menu seems to be working correctly for me. Is that still happening for you?

With the issue with it scrolling past the section start on mobile.

I have added the following code under Appearance > Customize > Custom > Javascript

// Correct Positioning
jQuery(document).ready(function($) {
  var $body           = $('body');
  var $adminbarHeight = $('#wpadminbar').outerHeight();
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight   = $('.x-logobar').outerHeight();

  $('.x-nav-scrollspy li a[href^="#"]').off('click');
  $('.x-nav-scrollspy li a[href^="#"]').click(function(e) {
    e.preventDefault();
    var $contentBand = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight - $topbarHeight - $logobarHeight + 1
    }, 850, 'easeInOutExpo');
  });

  $body.scrollspy({
    target : '.x-nav-collapse',
    offset : $adminbarHeight + $navbarHeight + $topbarHeight + $logobarHeight
  });

});

// Fixing the custom JS code for inner pages
jQuery(document).ready(function($) {
  var $navbarHeight   = $('.x-navbar').outerHeight();
  var $topbarHeight   = $('.x-topbar').outerHeight();
  var $logobarHeight  = $('.x-logobar').outerHeight();
  var $combineHeight  = $navbarHeight + $topbarHeight + $logobarHeight;

  $('.masthead.masthead-stacked').css( 'height', $combineHeight );
});

And it now correctly scrolls to the top of the section. 🙂

Hope this helps, any issues let us know.

Thank you!

[SebamoeParticipant]

Hi,

Thanks for looking into it!

It does scroll to the right place now, however the mobile menu still does not highlight the current section. I would really appreciate if you had a solution for this as well 🙂

Best,
Sebastian

[SebamoeParticipant]

This reply has been marked as private.

[Author]

Posts