• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Nav Menu for Mobile

Home › Community Forums › Adapt Theme Support › Nav Menu for Mobile

Tagged: adapt, nav

  • This topic has 3 replies, 2 voices, and was last updated 9 years ago by kronos.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 24, 2013 at 3:02 am #5475
    marmoset
    Customer

    Hi all

    Two items I need help with – both out of the box issues with Adapt:
    1. Out of the box Adapt behaves a certain way for mobile iphone and android size screens.
    The nav menu becomes a vertical stack of rectangular bars with link text. This looks strange as the nav stack takes up almost all of the initial screen on the mobile. Can we alter this so that we can have a single nav item called ‘Navigation’ or ‘Menu’ etc that when clicked opens up the nav items which can then be clicked to open?
    2. The CSS changes we have made to alter the nav text colours and background etc aren’t reflected in the mobile nav items. What is the css required to alter this?

    many thanks

    June 24, 2013 at 2:25 pm #5478
    kronos
    Customer

    You would have to redesign the css of the nav to be horizontal (if thats what you want). Although, you’ll need to have css skills to do this, as it could take some time and effort to implement. You’ll also need to be familiar with responsive css as well. That’s if you want to manually do it.

    There is a plugin called dropdown menus (I think) that creates a single menu that you tap and it opens up. Here is an example – http://demo.appfinite.com/classik/ – view this theme demo from a phone. You could also use a menu plugin like Uber Menu.

    Wes is currently working on the new version which will have horizontal menus and a ton of other updates for Genesis 2.0. – http://appfinite.com/topic/optimal-update/#post-5055 ……So if you can wait, then it will automatically be done when the new update is available. But if you want a signle nav item instead of horizontal menus, then try out one of those plugins above.

    June 24, 2013 at 10:13 pm #5487
    marmoset
    Customer

    Thanks kronos
    Also re my point 2 – how do I get the mobile menu to be the same as the standard menu I have created by adjusting colours etc with genesis extender (http://www.bacchusmarshcp.com.au/temp/ ), and I suppose the second question is why are they different since it is the same menu? thanks again

    June 25, 2013 at 1:52 pm #5495
    kronos
    Customer

    Its showing up different because of the code in the responsive section. The responsive section of the css adjusts the menu to be vertical….but again, Wes is redesigning this to be horizontal instead. Here is an example – http://demo.appfinite.com/epik/ view in a mobile browser, or resize your browser to see the difference.

    The only thing I can recommend is to copy the menu/nav code from the 2nd responsive section –

    @media only screen and (min-width: 600px) and (max-width: 960px)

    and add those same adjustments to the top/first responsive section under this –

    @media only screen and (max-width: 600px)

    It will take some effort, but it can be done….and it will probably be easy if you’re good with css. Other than that, there will be an entirely new version of this theme when Genesis 2.0 comes out (which will be soon).

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2022 · Appfinite · Built With The Genesis Framework