Jump to content

Menu Small Display

Recommended Posts

I just got a new phone and was looking at my webstore on it.  If I hold it the tall way everything looks fine, but if I flip it to show wide the menu I created shows before the featured categories and products though I have it to show on medium-up and have the menu on left canvas for small screens.  Here is some of my code on my main template.


 <div class="row {$SECTION_NAME}_wrapper brd1 marg-bottom">


  <div class="large-3 columns show-for-medium-up marg-bottom" id="sidebar_left">

 <div class="menu-maintitle">Shop by Category</div>

<div class="menu-main-div"><a class="menu-main-ebay-txt" href="/listed-only-on-ebay.html">Listed only on eBay</a></div>
 <div class="menu-main-div"><a class="menu-main-etsy-txt" href="/listed-only-on-etsy.html">Listed only on Etsy</a></div>
  <div class="menu-main-div"><a class="menu-main-link-txt" href="/ashtrays.html">Ashtrays </a><span class="menu-main-link-char right thinpad-right"> &#9654;</span></div>
<div class="menu-main-div"><a class="menu-main-txt" href="/beer-and-liquor-bottles.html">Beer and Liquor</a></div>
<div class="menu-main-div"><a class="menu-main-txt" href="/books-catalogs-and-manuals.html">Books, Catalogs and Manuals</a></div>
<div class="menu-main-div"><a class="menu-main-link-txt" href="/bottles-jars-and-jugs.html">Bottles and Jugs<span class="menu-main-link-char right thinpad-right"> &#9654;</span></div>
<div class="menu-main-div"><a class="menu-main-txt" href="/boxes-crates-and-drawers.html">Boxes, Crates and Drawers</a></div>
<div class="menu-main-div"><a class="menu-main-txt" href="/boxes-cigar.html">Boxes - Cigar</a></div>



               <div class="small-12 large-9 columns" id="main_content">

                   <div class="row collapse">

               <div class="small-12 columns small-collapse">

                  {include file='templates/element.breadcrumb.php'}




Thanks for any and all help

Link to comment
Share on other sites

Posted (edited)

I was messing around with it and changed all my show-for-medium-up to show-for-large-up on the main template.  And changed this

 <div class="off-canvas-wrap" data-offcanvas reveal-for-medium>
         <div class="inner-wrap">
                {include file='templates/box.off_canvas.left.php'}
            {include file='templates/box.eu_cookie.php'}

and I changed this:

 <div class="small-6 columns show-for-medium-down pad-top">
 <div class="show-for-medium-down"><a class="left-off-canvas-toggle button white small" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg><span class="large14"><br />Categories <br /> Account  <br /> Register</span></a></div>



Do you think this is ok?


Edited by Claudia M
Link to comment
Share on other sites

Would you please summarize where and what you want to show in small, medium, and large.

Also, be aware that there are also display rules for whether the device is in portrait (taller than width) or landscape (wider than height) orientation.

Link to comment
Share on other sites

Everything seems to working the way I want on my old phone (smaller) and new phone both portrait and landscape.  When I click on the hamburger ( on the small and medium display) the left canvas opens revealing the menu, account info, and login and register.  When I click on a category the category opens and the left canvas hides.  I don't use the right canvas as I have the shopping basket showing all the time at the top. I haven't checked it on a tablet yet. I'm just not sure if there is a better way to code everything I've done.  It's weird having to treat my new phone as a medium display due to the landscape orientation.

If you get time will you check it out on your displays please?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...