Menu not available on iphone

Comments

• Albert

  February 2016

  Hi,
  
  yes, it is but it's the same color as background. You can change it's color with:

  #Top_bar a.responsive-menu-toggle { color: #000 !important; }

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

  February 2016

  http://oi66.tinypic.com/2usjv5u.jpg 

  the menu toggle is available and visible but the link is not working!  
• Albert

  February 2016

  If the link does not work, you need to deactivate all plugins first and remove all custom css. If this won't help, then we recommend to re-install theme files but thru FTP only.
  

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

  February 2016

  I found the problem! 

  It was in CSS !!

  #Top_bar #logo { position: absolute;}
  

  causes the menu toggle in mobile to not work! however when i remove it from my CSS, my menu text will be moved a bit down. 

  do you have any replacement CSS in my case to use? 

  
  

  Here is the website : http://rapidremovalsandcollections.co.uk/

  
  

  and CSS Code I am using now : 

  
  

  body { font-style: italic; }

  h1, h2, h3, h4, h5, h6 { font-style: normal; }

  
  

  h2 { letter-spacing: 5px; }

  h3 { font-weight: normal; font-style: italic; }

  h4 { font-weight: bold; letter-spacing: 5px;  }

  h5 { font-weight: normal; font-style: italic; letter-spacing: 4px; }

  
  

  .section-border-bottom { border-bottom: 0px solid rgba(0,0,0,.1); }

  
  

  .dark-text-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); }

  
  

  .header-fixed #Top_bar, #Top_bar.is-sticky { box-shadow: 0 0 0 0 !important; border-bottom: 0px solid rgba(255,255,255,.2); }

  
  

  /* Header */

  @media only screen and (min-width: 1240px) {

  #Top_bar #menu { background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif") !important; }

  }

  
  

  #Header .top_bar_left, 

  .header-fixed #Top_bar,

  #Top_bar #menu { background-color: rgba(0,0,0,.3); }

  
  

  #Top_bar .menu > li > a { letter-spacing: 3px; font-style: normal; }

  
  

  /* Footer */

  #Footer { display: none; }

  
  

  /* Shortcodes */

  .hover_box { text-align: center; }

  .hover_box .hover_box_wrapper { display: inline-block; }

  
  

  .offer .offer_li .desc_wrapper .title h3 { font-size: 42px; line-height: 42px; font-family: Lato; font-style: normal; font-weight: 300; letter-spacing: 5px; }

  
  

  @media only screen and (max-width: 767px) {

  .offer .offer_li .desc_wrapper { width: 90%; margin: 0 5%; }

  }

  
  

  
  

  
  

  .page-id-153 #Header { min-height: 100px !important; }

  .page-id-122 #Header { min-height: 10px !important; }

  .page-id-119 #Header { min-height: 10px !important; }

  .page-id-107 #Header { min-height: 210px !important; }

  .page-id-117 #Header { min-height: 210px !important; }

  .page-id-100 #Header { min-height: 210px !important; }

  .page-id-85 #Header { min-height: 210px !important; }

  .header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif"); }

  
  

  .section-border-bottom { border-bottom: 1px solid rgba(0,0,0,.1); }

  .dark-text-shadow { text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); }

  .header-fixed #Top_bar, #Top_bar.is-sticky { box-shadow: 0 0 0 0 !important; border-bottom: 1px solid rgba(255,255,255,.2); }

  
  

  #Top_bar.is-sticky .logo { min-height: 91px; }

  #Top_bar #logo { z-index: 100; left: 0; top; 0; overflow: visible; }

  #Top_bar .logo #logo img {

      padding:  0px 0px;

  }

  #Top_bar .logo #logo img {

      margin-top: -6px;

  margin-right: 10px;

  margin-bottom: 0px;

  margin-left: 0px;

  }

  #Top_bar .logo #logo img {

          max-height: 91px;

      }
• aapcdirectltd

  February 2016

  also now that it works fine on Mobile, the menu background is gone! if you can check it yourself on your computer & mobile version you would see what i mean... 

  would appreciate if you can assist me with this CSS problem on mobile version (no background) & pc version (not aligned with the menu bar) 

  
  

  thanks a lot

  
  
• Albert

  February 2016

  1. You have too many menu items in header and that's why they do not align with logo. What you need to do is to decrease padding between menu items with the following css:

  @media only screen and (min-width: 1240px) {
      #Top_bar .menu > li > a span:not(.description) { padding: 0 15px !important; }
      #Top_bar .menu_wrapper { margin-top: 15px !important; }
  }

  2. To display header background on mobile, instead of:

  .header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif"); }

  you should use it with !important declaration:

  .header-fixed #Top_bar { height: 90px !important; background-image: url("http://rapidremovalsandcollections.co.uk/wp-content/uploads/2015/02/topbg.gif") !important; }

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