• 0

DMS 2 Option For Those Who May Have Issues With Mobile Menus


Question

Posted · Report post

Hey everyone

 

Found a cool free plugin that is compatible with DMS2 that I started using.  I had a client (had a couple before too) who always wanted the mobile menu to react or come out from the left side of the screen when on a phone or make the mobile menu appear sooner (screen size based) instead of what is built into the DMS mobile menu settings.  I have used custom CSS before but wanted a quicker option.

 

I am using the "Responsive Menu" (plugin author is Peter Featherstone since there are other plugins with similar names) and it works perfectly.  Allows you to change all settings form the plugin menu area in the admin section of Wordpress...colors, background, etc etc.  Can even upload a custom image to replace the 3 bars (think some call it the "hamburger" icon). 

 

Anyone, just wanted to pass it on...works great and I have not noticed any conflicts.

 

James

1 person likes this

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted (edited) · Report post

Thanks for the info. Edited by Aires
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is this the one?  https://wordpress.org/plugins/responsive-menu/

 

How did you implement (shortcode, PLNext Box)?

 

Looks really cool...surprised it's free.  Do updates come in through Dashboard or do they need completed manually?

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Is this the one?  https://wordpress.org/plugins/responsive-menu/

 

How did you implement (shortcode, PLNext Box)?

 

Looks really cool...surprised it's free.  Do updates come in through Dashboard or do they need completed manually?

 

That's the one.  You just activate it (don't have to add it to the DMS page anywhere or editor).....go to the settings for it (installs a menu option in the WordPress admin area under "Settings".  You select which menu you want to show on mobile/tablet view (you'll have to already have created some menus like you normally do within WordPress) and then it has a ton of options and each one has a little pop up that explains what it does.  I like how you can put in the screen size cutoff that you want before the  mobile menu takes over AND there is an area where you add the CSS Class names for the menus to hide once the mobile one takes over.  For example, the site I was building was using the Simple Nav section (which doesn't turn into a mobile menu anyway) so I just added that class name into the class box setting (.simplenav) and it hides it once the mobile one takes over.  

 

Pretty cool and kind of surprised myself it's free with all the options that come built in.  

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Excellent.  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well, in searching for a fixed header option menu plugin, I found one that I actually like better than the one I just posted about.  

 

It's called "ShiftNav" ...plugin author is Chris Mavricos if you need to narrow it down while searching but it adds a sticky header up top with the menu "hamburger" icon and site title (as long as you have the title filled in in the Wordpress settings area).

 

Works like the other in that you can adjust settings, etc.  I added the below CSS (has a CSS area too) and this seems to make the padding and placement of the text and icon perfect (it also adds a nice little drop shadow):

 

#shiftnav-toggle-main {
position: fixed;
top: 0;
left: 0;
width: 120%;
padding: 20px 40px 20px 20px;
z-index: 5000;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
-ms-transition: -ms-transform 0.5s;
-o-transition: -o-transform 0.5s;
transition: transform 0.5s;
text-align: center;
cursor: pointer;
  -moz-box-shadow: 3px 3px 5px #000000;
-webkit-box-shadow: 3px 3px 5px #000000;
box-shadow: 3px 3px 5px #000000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James,

 

Greetings! I am new to all of this, including the use of CSS, which I find awesome and empowering, but glad to be on board now with DMS2 and WhiteHousePro6. Anyway, your solution above is outstanding! Thank you! Prior to this I was searching Google to learn about mobile queries, etc. 

 

One thing, do you know how I might be able to change the color of the background field behind the main menu items? Right now it is green. It's not unattractive but it does not match our other brand and website colors.

 

Thank you!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James, I tried that ShiftNav plugin as you recommended and it is really great. Exceptional.

 

However, something in the plugin is knocking out the background video that normally plays in the Canvas Section behind our Branding Area. So, I regret that I had to deactivate it. I would love to know how to go into ShiftNav and look around, to see what makes the video shut down. I wil try to contact them.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now