Results 1 to 6 of 6
  1. #1
    Join Date
    Aug 2013
    Posts
    37
    Plugin Contributions
    0

    Default Looking to Move Side Menu Items to Mobile Menu

    Hi. I am trying to make a legacy ZenCart site mobile friendly.

    The way I am trying to do this is increase the font size.

    But also, I need to have the left and right side menus disappear on a screen width that is less than whatever a desktop or laptop screen is.

    Then, I want to have a mobile button appear and selectively load the most essential side menu items into a slideout.

    @media only screen and (max-width: 1026px) {
    .leftBoxContainer, .rightBoxContainer {
    display: none;
    }
    }

    works to hide the columns. However, there is an empty space where the columns were.

    What else needs to be done to stretch the middle area fully left to right? Thank you!

  2. #2
    Join Date
    Aug 2013
    Posts
    37
    Plugin Contributions
    0

    Default Re: Looking to Move Side Menu Items to Mobile Menu

    @media only screen and (max-width: 1000px) { ..centerColumn { width: 100%; }}

    This isn't working....The column disappears but this does not work as expected.

  3. #3
    Join Date
    Feb 2006
    Location
    Tampa Bay, Florida
    Posts
    9,625
    Plugin Contributions
    123

    Default Re: Looking to Move Side Menu Items to Mobile Menu

    It might be worthwhile just to upgrade it so you can use the responsive classic template, which gives you a mobile friendly site.
    That Software Guy. My Store: Zen Cart Modifications
    Available for hire - See my ad in Services
    Plugin Moderator, Documentation Curator, Chief Cook and Bottle-Washer.
    Do you benefit from Zen Cart? Then please support the project.

  4. #4
    Join Date
    Aug 2013
    Posts
    37
    Plugin Contributions
    0

    Default Re: Looking to Move Side Menu Items to Mobile Menu

    Quote Originally Posted by swguy View Post
    It might be worthwhile just to upgrade it so you can use the responsive classic template, which gives you a mobile friendly site.
    Def going to do just that. For now, I'm working around upgrading.

    I managed to get the side column to disappear on mobile.

    Now the issue is I want to call an alternative stylesheet for mobile devices.

    What file calls the stylesheet? I will just check user agent in PHP and depending on if it's mobile, I'll call one or the other.

    Thanks!

  5. #5
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Looking to Move Side Menu Items to Mobile Menu

    Quote Originally Posted by starrysky View Post
    Now the issue is I want to call an alternative stylesheet for mobile devices.
    Probably not necessary.

    Quote Originally Posted by starrysky View Post
    I will just check user agent in PHP and depending on if it's mobile, I'll call one or the other.
    User Agent is not fully reliable.
    Definitely better to just rely on media-queries.

    Quote Originally Posted by starrysky View Post
    What file calls the stylesheet?
    html_header.php

    Probably better to not touch that though, and instead just add a stylesheet_mobile.css file. It will always load, but if its media queries are properly targeted to only appropriate (er, smaller) screen-sizes, then desktops not requiring it will ignore those directives anyway.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  6. #6
    Join Date
    Jan 2004
    Posts
    66,364
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: Looking to Move Side Menu Items to Mobile Menu

    You'd probably get more actionable help if you posted the actual URL so it can be assessed directly.

    Also helpful would be what screen-size and/or device you're primarily interested in supporting. The possibilities are vast. Knowing your target audience's primary need would help you focus on what's actually beneficial vs engineering for devices that never visit your site.

    Helpful to also state your Zen Cart version and where your template originated from.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

 

 

Similar Threads

  1. v154 removing menu items from header menu
    By Awalji in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 9 Jun 2015, 08:00 PM
  2. How to add menu items for top horizontal menu? - help
    By AndriyZ in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 7 Feb 2010, 01:14 AM
  3. Easy way to edit header/top menu, footer menu, and sidebar menu?
    By templar2 in forum Templates, Stylesheets, Page Layout
    Replies: 8
    Last Post: 30 Jun 2009, 11:14 AM
  4. How to move admin menu items to another Admin menu?
    By hauruapai in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 29 Oct 2007, 02:21 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR