Responsive Issues: Header, Menu, Search

- 8 years, 4 months ago rebeccaolson
  Participant
  
  Expired
  
  Since launching my site, I’ve received the following feedback from customers about issues they are experiencing on mobile devices (tablets and phones:
  
  1) Tablet (ipad 8): The menu in the navigation bar, which is the regular (non-responsive) menu, does not stay on the bar – the menu items on the right are shifted down and to the left, over the top of the slider.
  
  2) Tablet (ipad 8): When you click on a menu item and see the subcategories, they do not disappear when you click elsewhere on the site; they stay fixed on the screen until you move to a new link/page.
  
  3) Mobile: (iphone 4s) In portrait view (very small) the menu icon that should be aligned left in the header bar, is instead shifted to the center and covering the logo.
  
  4) Is there a way to add a search function in the side/slideout menu for responsive (mobile/tablet) layouts? I had to remove the search/mini cart from the header on responsive because it was throwing off the logo. Is there a widget or workaround you know of? The best I could find is this: https://www.kriesi.at/support/topic/how-to-add-search-to-mobile-smart-phone-width-slide-out-me
- 8 years, 4 months ago Mirela
  Participant
  Hello,
  
  1-Add this code itno your custom css box:
  
  @media (min-width: 989px) { nav .menu > li { margin-right: 5px !important; margin-left: 5px !important; } .header_11 #logo { margin-left: 8px !important; margin-right: 8px !important; } }
  
  2-I tested the site but i don’t get this effect. Can you send us a video or screenshot of it?
  
  3-I don’t understand the issue with the mobile menu. When i open it from mobile, it does display at the side just as it should (screenshot).
  
  4-Sorry but this customization is not included in support.
  
  Best regards!
- 8 years, 4 months ago rebeccaolson
  Participant
  
  Expired
  
  1) Thank you – I will ask the owner of the ipad to test, and let you know if it doesn’t work.
  
  2) I can’t give you a video, because it wasn’t my tablet; a family member showed me when I saw him recently. I’m not sure how else to describe it; the dropdown menus are basically stuck in the down position – clicking on another part of the page does not remove them. So if they happen to drop down over a part of the page you are trying to view, you are out of luck. Only clicking on an html link to another page or refreshing the page makes them go away.
  
  3) I apologize for not being clear. I am referring to the menu icon (the three small lines) that appears to the left of the logo in the header bar, not the menu itself. Also, this is an issue that is specifically with the iphone 4 (which is a fairly small screen.) Everything looks fine on my smartphone, which is a more standard size/Nexus 5x.
  
  4) I did not expect you to customize, I was just hoping there would be a link or widget you could direct me to where I could research it myself. Thanks anyway.
- 8 years, 4 months ago Ruco
  Keymaster
  Hello,
  
  1. Please try this code instead:
  
  @media (max-width: 1100px) and (min-width: 981px){ .header_11 #logo { margin-left: 15px;//adjust the size here margin-right: 15px; } }
  
  2. I checked it but can’t found the issue you are having.
  
  3. Use this css code:
  @media (max-width: 480px){
  .mobile_small_menu {
  margin-left: -30px;
  }
  }
  
  4. Please can you show me your site credentials? I will help you show the search on responsive menu, if you enable the search in header.
  
  Best regards!
- 8 years, 4 months ago rebeccaolson
  Participant
  
  Expired
  
  1) Thank you – I’ll let you know if this doesn’t work.
  
  2) Okay – perhaps it was an issue with his tablet, and not with the site.
  
  3) I will ask my friend who has the iphone4 to check, and let you know if it doesn’t work.
  
  4) Thank you! I’ll send you the credentials in a private reply.
- 8 years, 4 months ago rebeccaolson
  Participant
  
  Expired
  
  This reply has been marked as private.
- 8 years, 4 months ago Ruco
  Keymaster
  Hello,
  
  I can’t edit the responsive menu file from the WP dashboard. Pelase edit the file:
  tower/includes/view/menu-small-side.php’ Add this code:
  
  <?php if($cl_redata['header_responsive_tools'] && ($cl_redata['show_search'] || class_exists('Woocommerce'))): ?>  <div class="header_tools"> <div class="vert_mid"> <?php if($cl_redata['show_search']): ?> <div class="search_field"> <?php get_search_form(); ?> </div> <?php endif; ?> <?php if(class_exists('Woocommerce')): ?> <?php get_template_part('includes/view/woocommerce', 'cart'); ?> <?php endif; ?> </div> </div>  <?php endif; ?>
  
  after the logo like here:
  
  https://codeshare.io/lJ9sk
  
  Add these lines at custom css code:
  
  .snap-drawer-left .search_field #search-form:after { /* content: " "; */ content: "\e1b7"; font-family: 'moon'; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; position: absolute; right: 15px; top: 11px; font-size: 16px; display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none; background-position: 0% 0%; background-repeat: repeat; margin-top: 0; color: #bbb; } .snap-drawer-left .search_field #search-form input#s{ width: 100%; height: 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius: 0px; background-color: #efefef; border: 1px solid #e4e4e4; display: inline-block; } .snap-drawer-left .header_tools_divider .header_tools { padding-left: 20px; float: left; display: block; left: 0; position: relative; }
  
  You must turn on header tools in responsive and search.
  
  Let us know if you need further help.
  
  Ps. These types of customization aren’t included in theme support.
  
  Best regards!
  
  This reply was modified 8 years, 4 months ago by Ruco.
- 8 years, 4 months ago rebeccaolson
  Participant
  
  Expired
  
  Ruco – thank you for your help!
  
  3) Unfortunately, that didn’t work – the menu icon is still covering the logo on iphone 4. Here is a screenshot:
  
  4) I definitely did not expect any custom coding for this – though I certainly appreciate your help. Unfortunately, it did not work; the mini cart showed up in the side menu- but there was no search box. In addition, the cart showed up above the logo, rather than below it. Finally, I do not want the minicart/search in the responsive header – that is the reason I wanted it in the side menu. On phones, having the search/mini-cart in the header looks cluttered, and the icons are really too small to be useful. I was hoping to have the search show up in the side menu *instead* of in the header. If that isn’t an option, I’d rather not have it at all.
  
  Again, I realize adding a search bar to the side menu is custom code, and do not expect you to spend more time on this. Instead, I have submitted an official request in the appropriate “suggest features” forum. I would like to see this at some point, and imagine others would love the option as well. Overall, the header in responsive menus is not great. Even with all the customization you guys have helped me with, on some phones, my logo isn’t centered and, as I’ve stated in question 3 (above), on phones where the logo is centered, the menu icon covers it.
  
  So I look forward to your help with #3 – but please don’t worry any more about #4, unless it’s something you’re curious about and are interested in working on (in which case, I’m happy to work with you until we get it figured out.) Thanks!
  
  Rebecca
- 8 years, 3 months ago Mirela
  Participant
  
  Hello,
  
  3) The code does work, but you had pasted it wrong. There where errors in your custom css box. I edited it and now the expected result is eventually showing. Please check your site.
  
  4)Unfortunately, it did not work; the mini cart showed up in the side menu- but there was no search box.
  I think you misunderstood the last reply. By default the search does not display in responsive mode (left menu style). The cart does. So my colleague offered our help to make the custom edit and add search in this layout. We did not say that by checking the “turn on header tools in responsive and search” option, the search would show up. You need custom code for that.
  
  NOTE: We already did the job to display cart icon in mobile side menu, in this other topic of yours. You can use the same logic to display search if you still want it.
  
  Best regards!
- 8 years, 3 months ago rebeccaolson
  Participant
  
  Expired
  
  3) Unfortunately, it did not move. We made sure to completely power off/on the phone to ensure it wasn’t a caching issue. I also upped the margin to -50 and it still didn’t work.
  
  4) I’m sorry I didn’t understand that Ruco was only giving me a partial workaround and not the full code. I didn’t expect you guys to make any code for me, so please don’t worry any more about this – it was a hopeful request that perhaps there was a widget or something I could use. Since that isn’t possible, I’ve submitted it through the proper “suggest features” forum and I’ll leave it at that. Thank you for the reminder, but the link you provided above was to include the cart/search in the navigation bar/header on mobile. I realized after following your instructions (a few months ago) that I do not want the cart/search in the header on mobile. It looks cluttered on small phones to have so many small icons up there by the logo. I was hoping for just a search bar/icon on the side menu. I realize this is not possible without custom code. I understand that you can’t do this for me, so let’s call it good.
- 8 years, 3 months ago Kris
  Participant
  
  Hello,
  3. This is the view i get on Iphone 4/4s:
  (https://www.awesomescreenshot.com/image/1451713/e4346f06695aec823ebd116ba998cdb4).
  Did you manage to fix it?
  4. The code that our colleague gave you, was the full code to display the search on responsive menu, i think we didn’t understand very well what you were trying to say. But we understand now, and we will consider that in our future updates. Thank you for the suggestion.
  Let us know.
  Best regards!
- 8 years, 3 months ago rebeccaolson
  Participant
  
  Expired
  
  3. Unfortunately, no – the issue still exists with her phone. How odd. I guess if it is working for you on iphone 4/4s, then I’ll have to assume it’s an issue with her phone.
  
  Thanks!
  
  Rebecca
- 8 years, 3 months ago Kris
  Participant
  Hello,
  
  I can not tell for sure why this issue didn’t appear on iphone 4s then, but i can see it now. Please add this code to your custom CSS box:
  
  @media (max-width: 320px){ .mobile_small_menu { margin-left: -41px; } }
  
  Let us know.
  
  Best regards!
- 8 years, 3 months ago rebeccaolson
  Participant
  
  Expired
  
  Kris – That fixed it! Thank you so much!