sandbox responsive menu – or ANY nice responsive menu

Community Forums Forums General Discussion sandbox responsive menu – or ANY nice responsive menu

This topic is: not resolved

This topic contains 20 replies, has 7 voices, and was last updated by  John 1 year, 1 month ago.

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • #70059

    Mealtog
    Participant
    Post count: 464

    ok great. Let me give this a try. Been dieing to find a way to easily make Menu’s not only responsive but “responsible” for mobile users.

    @John, how did you get the slider to display the full width in Metro. Nice.

    #70117

    John
    Participant
    Post count: 157

    Mealtog,

    Here’s a tutorial I wrote last month on how to do that: How to add a Soliloquy slider to a Genesis page template file

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #70134

    Mealtog
    Participant
    Post count: 464

    Hey John, that is awesome. Thanks for sharing that. It will work perfectly for one project.

    Also, I tested the Responsive Menu and ran into a few things. Could not fix it so had to remove it. Because I don’t have a header logo and I just display long text, the Menu button ate into that. I think I have to modify CSS but did not have a chance to figure it out. Then I added a logo and the Menu button behaved much better. Except sometimes, it would not show and disappear properly (on the fly) when I resize the browser to do testing. I think it full width slider looks great. My only concern is the ratio and size of the image. I would need to make sure all upload photos will meet the minimum size requirement and take take photos with the crop ratio in mind. But very cool indeed.

    I am still trying to figure out a way to better manage Menus for Genesis in a mobile environment. I have seen Facebook mobile type Menu’s where it’s an entire new page (swiped to the left), a Footer Menu like yours or just a simple dropdown Hamburger menu. I actually wish SP would have built this in the Pro themes since mobile is so important these days.

    • This reply was modified 1 year, 1 month ago by  Mealtog.
    • This reply was modified 1 year, 1 month ago by  Mealtog.
    #70208

    lbdesign
    Participant
    Post count: 26

    John, your mobile menu solution is truly elegant. Maybe you can change the button that appears in the upper right corner into a full-width button/bar that sits between the header logo and the page content? (leaving the rest of it just the way it is)

    #70309

    John
    Participant
    Post count: 157

    lbdesign,

    That’s part of the beauty of this mobile menu solution – the CSS can be reworked to fit any site and/or design preferences.

    From what I’ve seen while using my phone to access the web, buttons or icons, usually in the upper right corner, are the norm for menus on mobile websites, and someone who uses their phone for surfing the web is going to be accustomed to that method. Screen real estate is a premium on mobile, and I would prefer not to take up space with a bar when a small button works just as well, and I can also shrink the logo and move it up into the other corner, conveniently out of the way.

    If you use it and try the full-width bar approach, let me know so I can check it out.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

    #70311

    John
    Participant
    Post count: 157

    Mealtog,

    When using this menu with a text site title, couldn’t you reduce the size of that text to fit along with the menu button?

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google ;)

Viewing 6 posts - 16 through 21 (of 21 total)

You must be logged in to reply to this topic.