[Benjamin HParticipant]

On the Mobile website http://www.lvbaptist.org/beta I have four issues I need help with (Using with iPhone 5s)

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!

[ChristopherModerator]

Hi there,

#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.

[Benjamin HParticipant]

Thank you so much for your help

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!

[RadModerator]

Hi Benjamin,

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.

[Benjamin HParticipant]

Thank you again! Those pieces of code both helped. I have a few new questions which I need your help on.
http://www.lvbaptist.org/beta/

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)

[ChristopherModerator]

Hi there,

#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.

[Benjamin HParticipant]

Thank you! Unfortunately some of the issues still seem to be persisting.
#1 It’s not showing the selection I made to be “blue”
#2 If I delete the -20 then it adds a gap above the first item in each of menu drop downs
#3 I added the code, but it won’t only show the main menu items and drop down the sub menus
#4 There is still a gap on the mobile version of all the pages

[ZeshanMember]

Hi Benjamin,

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 HParticipant]

Thank you! Those pieces of code really helped. One of those codes affected scrunching the main menu text though. I’m not sure why it did that (not mobile). Another question I have was how to disable the footer on mobile pages. Thank you!

Benjamin

[Nabeel AModerator]

Hi 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!

[Benjamin HParticipant]

Thank you for showing me how to remove the full header.

#1 I know this kind of goes against what I just asked, but is there a way to only show certain footers… Currently I have 4 footer sections, is it possible to select which ones I want to have show on the mobile pages.

#2 When I made one of these changes on the site the menu bar text got scrunched together. I’m not certain what made that happen. It’s difficult to click on now…

#3 On the mobile page, it is still showing the entire menu and not limiting itself to the main menu and showing the sub menus when selected….

Thank you for your help!

[Benjamin HParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Benjamin,

1. This is not currently possible. But, if you’re using Text element, you can take advantage of our Visibility shortcode (see http://theme.co/x/demo/integrity/1/shortcodes/responsive-visibility/).

2. Please replace the code given

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

with

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

3. Please add the code below to your CSS

@media (max-width: 979px) {
.x-nav-collapse .sub-menu {
display: none !important;
}
}

Hope that helps. 🙂

[Benjamin HParticipant]

Thank you! When I tap on the parent menu though , the sub-menu isn’t expanding…

[CousettMember]

Right now the links that show are the following:

Are these all anticipated to be parent menu items?

[Author]

Posts