1. When I tap on the menu drop down button the menu bar automatically scrolls down and back up, which doesn’t give me an option to tap on any links
2. I want the menu button to be to the right of the logo
3. The mobile site should have a Mobile page Enable/Disable button at the bottom of the site. Can I enable that type of button?
4. I tried a few forum posts, but I cannot seem to remove the Slider from the Mobile Homepage.

Thank you for your help!

#1 Please add the following CSS code under Customize -> Custom -> CSS:

@media (max-width: 979px){
nav.x-nav-collapse.collapse.in {
height: auto;
}
}

#2 Menu is already at right side of logo ,Would you give us more detail.

#3 Our theme is responsive and you can not switch back between desktop view and mobile view with a button.it get resized automatically

#4 You can use visibility options in revolution slider setting.Go to Revolution slider -> setting and in right side scroll down to find “Mobile Visibility” and enable “Disable Slider on Mobile”.

Hope it helps.

Issue #1 The navigation no longer collapses , but it still still does some kind of jerk thing after after expands. You can see the same thing with the according short code on this page with the according short codes http://www.lvbaptist.org/beta/what-we-believe/

Issue #2 Here is a screenshot of of where I want to see the expand/collapse navigation button

Issue #4 I’ve attached a screenshot to show that I have already done this, however it still persists.

Thank you!

1. Your navigation works well on my end. How about this,

@media (max-width: 979px){
nav.x-nav-collapse.collapse.in {
height: auto !important;
}
}

2. Add this css.

@media ( max-width: 380px ) {
.x-btn-navbar{
position: relative;
top: -100px;
right: -25px;
}
}

3. How about setting the width in pixel when the slider should be hidden?

Thanks.

1. When a link in the menu is tapped on can the text color be changed to the blue that is used in the header to indicate it has been tapped on
2. Only half of main headers showing. I’ve included a picture below to show you want I’m talking about
3. I would like only the main menu items to show when the menu is expanded and when they are tapped on the sub menu items will expand for that particular menu item
4. Why is there a space at the top of all the mobile pages (see below)

#1 Please add the following CSS code under Customize -> Custom -> CSS:

@media ( max-width: 380px ) {
.x-navbar .x-nav > li > a:visited{
color:#2f5e87;
}
}

#2 You have this css cod in Custom -> CSS ,delete margin-top: -20px; from it.

.x-nav li .sub-menu{
padding-top: 0 !important;
margin-top: -20px;
}

#3 Add this in Java script under Customize -> Custom _> Java script

var menu_breakpoint = 979;
jQuery(function($){

		$('.s-mobile-collapse a').click(function(e){
			var current_width = $(window).width();
			if(current_width > menu_breakpoint)	return true;
			else {
				e.preventDefault();
				$('ul.sub-menu', $(this).parent() ).each(function(){
					if( $(this).hasClass('mobile-collapsed') ) $(this).removeClass('mobile-collapsed');
					else $(this).addClass('mobile-collapsed');
				});
			}
		});

And this one in CSS

.mobile-collapsed {
   display: none !important;
   visibility: hidden !important;
}

Now, the last step is adding this class name s-mobile-collapse to your parent menu item.

#4

.x-header-landmark {
display: none;
}

Hope it helps.

Thank you for writing in!

#1: Unfortunately, I didn’t get it, would you mind providing us a little more detail on it or if you can share a screenshot that would be very helpful.

#2: Instead of adding -20px, please use the following CSS code:

.x-navbar .x-nav-collapse .x-nav li a {
   margin: 0;
}

#3: Please try using the following:

var menu_breakpoint = 979;
jQuery(document).ready(function($) {

   $('.s-mobile-collapse a').click(function(e){
      var current_width = $(window).width();
      if(current_width > menu_breakpoint) {
         return true;
      } else {
         e.preventDefault();
         $('ul.sub-menu', $(this).parent() ).each(function(){
            if( $(this).hasClass('mobile-collapsed') ) $(this).removeClass('mobile-collapsed');
            else $(this).addClass('mobile-collapsed');
         });
      }
   });

});

#4: Upon checking, you’ve added custom CSS code that’s causing this issue, please try adding the following to fix it:

.x-btn-navbar {
   margin-top: -60px;
   top: 0;
}

Hope this helps. 🙂

Thank you.

Benjamin

You can hide the footer on mobile view, to do this please use this CSS code:

@media screen and (max-width: 768px){
.x-colophon.top, .x-colophon.bottom {
    display: none !important;
}
}

Let us know how this goes!