Jump to content

Archived

This topic is now archived and is closed to further replies.

Ozon

How to disable mobile menu view

Recommended Posts

Ozon

Hello all!

 

Could you help me please with disabling mobile menu view of my NavBar?

 

When i check my website from iPad NavBar looks like 1 button called "Menu", and if i press it - it looks like long black menu.

Share this post


Link to post
Share on other sites
GetMeWebDesign

There are two methods for doing this.

  1.  in WPadmin > Pagelines Pro > Allow Hidden Sections > check the box. Now you will see in any section, when DMS Live Editor, under Standard options, you have options whether to display or hide a section dependamt upon User or mobile/browser view
  2. With Custom LESS/CSS. Target your navi/navbar id > 
  3. @media (max-width: 767px) {
      #navi******** {
        display: none;
      }
    }
    or

    @media (max-width: 767px) {
      #navbar******* {
        display: none;
      }
    }

paste this code, using either the DMS Live Ediotr > </>Custom > Cistom LESS/CSS or via WP admin > Pagelines > DMS Fallbacks > Custom LESS


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ozon

There are two methods for doing this.

  1.  in WPadmin > Pagelines Pro > Allow Hidden Sections > check the box. Now you will see in any section, when DMS Live Editor, under Standard options, you have options whether to display or hide a section dependamt upon User or mobile/browser view
  2. With Custom LESS/CSS. Target your navi/navbar id > 
  3. @media (max-width: 767px) {
      #navi******** {
        display: none;
      }
    }
    or

    @media (max-width: 767px) {
      #navbar******* {
        display: none;
      }
    }

 

paste this code, using either the DMS Live Ediotr > </>Custom > Cistom LESS/CSS or via WP admin > Pagelines > DMS Fallbacks > Custom LESS

 

 

Didn't work for me, i tried:

 

@media (max-width: 767px) {
  #navbarcq6vtt {
    display: none;
  }
}
 
or
 
@media (max-width: 767px) {
  #navbar cq6vtt {
    display: none;
  }
}

Share this post


Link to post
Share on other sites
greenfly

 

 
@media (max-width: 767px) {
  #navbar cq6vtt {
    display: none;
  }
}

 

 

 

Can you make sure you correct the typo on this line 

 

  #navbar cq6vtt 

 

An error like this can stop the added CSS working. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Ozon

Tried again with

 

@media (max-width: 767px) {
  #navbarcq6vtt {
    display: none;
  }
}
 
Didn't change anything - same "Menu" button on iPad.

Share this post


Link to post
Share on other sites
GetMeWebDesign

If that is the correct id and it is a navbar, then can you check all your custom CSS in a validator. That code should work, but if you have errors in you Custom LESS/CSS then that can prevent the script being read


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ozon

Yes, it's navbar module - when i browse site from common desktop Chrome - it's ok. But if i check from iPad - it looks like 1 button "Menu" and if i click it - it looks like high black menu.

 

I'll check my CSS.

Share this post


Link to post
Share on other sites
GetMeWebDesign

An ipad is not a mobile.... it is a tablet. You need to use @media (max-width: 979px), I believe (bootstrap)


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ozon

Sorry for the long delay from my last reply, GetMeWebDesign, but i've found the problem:

 

code of wp-content/themes/dms/sections/navbar/section.php :

	    <div class="navbar-content-pad fix">
		
	    	<?php if($navbartitle) printf( '<span class="navbar-title">%s</span>',$navbartitle ); ?>
	
	      <a href="javascript:void(0)" class="nav-btn nav-btn-navbar mm-toggle"> <?php _e('MENU', 'pagelines'); ?> <i class="icon icon-reorder"></i> </a>
			<?php 
				if( $brand ){
					printf( '<a class="plbrand" href="%s" title="%s">%s</a>',
						esc_url( home_url() ),
						esc_attr( get_bloginfo('name') ),
						apply_filters('navbar_brand', $brand)
					 );
				}
				pagelines_register_hook('pagelines_navbar_before_menu');
				?>
	      		<div class="nav-collapse collapse">
	       <?php 	if( ! $hidesearch ) {
	       				pagelines_register_hook('pagelines_navbar_before_search');
						pl_get_search_form();
						pagelines_register_hook('pagelines_navbar_after_search');

					}

					if ( is_array( wp_get_nav_menu_items( $menu ) ) || has_nav_menu( 'main_nav' ) ) {
					wp_nav_menu(
						array(
							'menu_class'		=> 'font-sub navline pldrop ' . $align_class,
							'menu'				=> $menu,
							'container'			=> null,
							'container_class'	=> '',
							'depth'				=> 3,
							'fallback_cb'		=> '',
							'theme_location'	=> 'main_nav',
						)
					);
					} else 
						pl_nav_fallback( 'navline pldrop '.$align_class );
					
	?>
				</div>
				<?php pagelines_register_hook('pagelines_navbar_after_menu'); ?>
				<div class="clear"></div>
			</div>
		</div>

So this code shows button "MENU" instead of normal menu on my iPad.

 

How to disable it?

Share this post


Link to post
Share on other sites
Danny

To disable the mobile menu you're going to have to use Custom CSS, like GetMeWebDesign mentioned. Another alternative would be to create a child section and customize the code yourself.

 

However, I am not entirely sure as to why you want to disable the mobile menu, if you do users on mobile devices such as iPads/iPhones will find it incredibly irritating to navigate your website, as most of the screen real estate (if you have a lot of menu items) will be covered with nav links.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ozon

Thank your Danny for your quick reply.

 

About the disabling - the one reason is that the menu on my site is pretty long and for mobile users it would be more useful to use common menu. The second reason is that the mobile menu label "MENU" hardcoded and anyway i should do something (like change code) to translate it into russian.

 

I tried as GetMeWebDesign mentioned (forgot to tell this in my last reply):

@media (max-width: 979px) {
  #navbarcq6vtt {
    display: none;
  }
}

but only thing i got - mobile menu dissapeared at all on iPad. Thats why i looked into code.

 

Could you help me with creating a child section?

Share this post


Link to post
Share on other sites
Simon

add_action( 'pl_no_mobile_menu', '__return_true' );

Share this post


Link to post
Share on other sites
GetMeWebDesign

Ozon. I am not sure you are asking the correct question for which you want an answer. Your original question was how to hide the mobile menu, yet you post that this is now hidden (if I have read that correctly). Could you clarify what it is you are wanting to achieve. For instance:

 

  • Do you want your navigation to appear as it might on a larger browser even when reduced to viewing it on a tablet? 
  • You do not want any form of menu/navigation on tablets or mobile phones
  • you want a menu that is diffrent from the side loading nav that is default settings for DMS, in mobile/tablet

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ozon

 

Ozon. I am not sure you are asking the correct question for which you want an answer. Your original question was how to hide the mobile menu, yet you post that this is now hidden (if I have read that correctly). Could you clarify what it is you are wanting to achieve. For instance:

 

  • Do you want your navigation to appear as it might on a larger browser even when reduced to viewing it on a tablet? 
  • You do not want any form of menu/navigation on tablets or mobile phones
  • you want a menu that is diffrent from the side loading nav that is default settings for DMS, in mobile/tablet

 

 

Hello GetMeWebDesign

 

Yes, i meant to change view from special tablet menu to common menu, so:

 

  • yes
  • no, i want common large browser menu
  • yes, i want common large browser menu

Share this post


Link to post
Share on other sites
Danny

If you want to disable the mobile menu completely please use Simon's code above. I am actually confused as to what you want now ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

Ozon"] In effect, the trigger for the mobile menu needs to be at a lower px than at present (so that you have the normal site navbar rather than the mobile holder on tablets). I think @[member="Danny would be the better person to advise you on how best to achieve this, as I am assuming the trigger is controlled by javascript and not too sure how effectively this can be overridden by custom and browser specific css


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Ozon

If you want to disable the mobile menu completely please use Simon's code above. I am actually confused as to what you want now ?

 

Hello Danny!

Yes, i want to disable mobile menu completely.

 

Tried to add this code 

add_action( 'pl_no_mobile_menu', '__return_true' );

into functions.php, so it looks like:

 

/*
// ====================================================
// = YOUR FUNCTIONS - Where you should add your code  =
// ====================================================
*/
add_action( 'pl_no_mobile_menu', '__return_true' );

But it didn't work.

 

I can't figure, what i should do with this code.

 

According to http://docs.pagelines.com/advanced/ i should change it to something like:


  1. add_action('action_name', 'your_function_name');
  2.  
  3. function your_function_name() {
  4.  
  5. // Add your code here...
  6. }

 

but in 

add_action( 'pl_no_mobile_menu', '__return_true' );

name section is first ('pl_no_mobile_menu'), not last.

Share this post


Link to post
Share on other sites
Danny

Which functions.php file have you added the code too ? As you will need to use a child theme in-order to use that code.

 

You're more than welcome to use my child theme here - http://dannyholt.github.io/skeleton

 

and then add the code to skeletons functions.php file.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×