My Navigation Menu cuts in half and is hidden behind header images

Comments

• trillionbillion

  July 2016 edited July 2016

  iPhone and other mobile devices are fine, the hamburger icon shows up.
  
• Albert

  July 2016

  Hi,
  
  the last menu items goes below on smaller devices because you simply got to many of them to put them all on smaller devices. What you need to do is activate responsive menu sooner than it is already now. You can do this with Responsive Menu Initial Width option under Theme options > Responsive section.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• trillionbillion

  July 2016

  thanks I have increased the Responsive Width, to your recommended 1240px
  So the hamburger menu comes in a lot sooner, great, trouble is it's lost in the image, by being transparent, is there some css to make the menu block a color?
  Thanks
  BTW, I have spoken to my client around the number of items and that is what she wants, so looking for a compromise, do you think reducing padding, Lowercase type, reducing the logo, would help?
  What is the max. number items for the menu?
  
  
  
  
  
  
• trillionbillion

  July 2016

  The image above, as you can see is from my iPad, the iPhone menu is white and easier to see and read, can this be applied to the iPad version?
  thanks
  
• Albert

  July 2016

  To change responsive menu background, please use:

  #Top_bar #menu > ul { background: #FFF !important; }

  But about the number of menu items, you can put as many you want but many items always affect the design.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• trillionbillion

  July 2016 edited July 2016

  Thank you so much for that edit, it was very much needed, my client has not been seeing what I see on my iMac monitor and a second monitor, she has a 12/13" Macbook and she was always seeing a truncated menu, all was ok, till her supplier said that it looked all over the place on an iPad, this will keep them all happy.
  One final little edit, and I can see it in the code, just getting to it, the Plus Sign + can you tell me where to change it's colour, this will show up better also.
  Once again many thanks
  
  I can now rest this weekend.
  This site is done!
  
• Albert

  July 2016

  To change +/- icons color on responsive menu, please use an extra css:

  #Top_bar #menu ul li.submenu .menu-toggle { color: #000 !important; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• trillionbillion

  July 2016 edited July 2016

  Thanks, see how I go
  
  
• trillionbillion

  July 2016

  Works great on Smartphone, but invisible on Tablet (iPad) and ideas?
  
• trillionbillion

  July 2016

  Just a screenshot to show
  
  
• trillionbillion

  July 2016

  
• Albert

  July 2016

  Please move pasted css on 1st line of Custom CSS section because you must did a mistake somewhere in css and that's why above code doesn't work.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• trillionbillion

  July 2016

  perfect, many thanks again
  
• Albert

  July 2016

  You are welcome!
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next