Scrolling menu on mobile view


#1

Hi, first post - please be gentle :slight_smile:

Just wanted to say love the theme! Very impressed.

The only issue I am having is that the menu bar doesn’t scroll when viewing on mobile. Is there a bit of CSS code I can use to fix this?
I’m creating a website which has quite a long front page, so it’s important for the menu bar to scroll with it or it will be a really poor journey for visitors.

Really hoping you guys can help me with it, because I’m very exciting about using this theme.

Thanks in advance


#2

Hello there,

Thank you for reaching out to us here.

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the provided “Scripts in header:” box

<style type="text/css">
@media only screen and (max-width:991px){

  .top-bar.fixed{
    position: fixed !important;
  }
  
}
</style>

  1. Paste the following code into the provided “Scripts in footer:” box

<script type="text/javascript">

;(function($) {

  'use strict'

	var headerFix = $('.top-bar').offset().top;
	$(window).on('load scroll', function() {
		var y = $(this).scrollTop();
		if ( y >= headerFix) {
			$('.top-bar').addClass('fixed');
		} else {
			$('.top-bar').removeClass('fixed');
		}
	});

})(jQuery);  

</script>

  1. Save settings

You would need to clear the web browser’s cache before reloading your site to see the code addition takes affect.

Regards,
Kharis


#3

For some reason my reply didn’t send - apologies if this goes through twice.

That fixed it - thank you so much for your help and the swift response.

One issue I am struggling with now is that I’d like everything to be contained within the homepage/front-page - rather than linking to a separate page. So, for instance, when you click ‘Services’ on the navigation it just takes you to the services part of the homepage, rather than taking you to a separate page.

To clarify what I mean, AccessPress Parallax does this - Just scroll down and click Features and you’ll see what I mean

Is there anyway to do that on this theme?


#4

Hello there,

You can use “Custom Links” type of menu item on the Appearance > Menus. In the URL field enter http://yoursite.com/#elemID. Replace elemID with the ID name of the target element/section. You can find it by using the web browser’s inspector tool. Please see this screencast https://cloudup.com/cFTDj1wGUvJ.

Regards,
Kharis


#5

Thanks again for the swift response.

Apologies if this is something very simple, but how do I change the link of what is featured in the menu bar? And how do I select what is actually featured in the menu bar?


#6

Found it, please ignore my last question