Jump to content

Archived

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

atcdomainsolutions

Option For Those Who May Have Issues With Mobile Menus

Recommended Posts

atcdomainsolutions

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

Share this post


Link to post
Share on other sites
Aires
Thanks for the info.

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
atcdomainsolutions

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.  

Share this post


Link to post
Share on other sites
jmad

Excellent.  

Share this post


Link to post
Share on other sites
atcdomainsolutions

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
Claude203

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!


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites
Claude203

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.


Claude Johnson
BlackFives.org

Share this post


Link to post
Share on other sites

  • Similar Content

    • MissT
      By MissT+
      I've set the Mobile / Default Menu setting in the Layout & Nav section of the Platform 5 Pagelines settings to Mobile menu - that is a menu I have created called Mobile that is different to my Main menu.
      When I go to a tablet (ipad) or mobile (android device) and click the hamburger menu icon the menu that appears is still the Main menu and not the one I created called Mobile - am I missing something? Do I need to set the mobile menu somewhere else too?
      WP Version - 4.8.1
      Platform 5 Version - 5.1.7
      MegaNav Section Version - 5.0.17
      Many thanks in advance.
       
    • MissT
      By MissT+
      Is there a way to get the mobile menu to close when you click a menu item that is for an anchor link with the same page?
      Currently on mobiles and ipad the black mobile menu still covers a third or the screen after you have clicked a menu item (that is linking to an anchor link) and it has scrolled to the link / section within the current page. You have to physically click within the page / away from the mobile menu to get the menu and it's black background to disappear.
      Many thanks in advance.
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
×