SPLIT MENU on Tablets & Handheld Devices

Comments

• Albert

  April 2015

  Hey,
  
  there is nothing what could be done in this case because you used large logo which is over the header. If we'll move menu up, menu will cover the logo.
  

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

  April 2015

  Ok fair enough about the vertical placement but that was only a portion of my question. What about it not being centered on the screen and the text also not being centered in the box? How do we fix that?

  
  

  
  

  
  

  
  
• Albert

  April 2015

  Sorry for that but we missed that part of question. We have checked your website once again and as we see, menu stars from top on mobile now and menu items are centered. So what exactly you want to do know with them? In case, this is what we see now http://pasteboard.co/2JhO8rFo.png
  

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

  April 2015

  I think I figured something out. Not sure if it is the proper fix, but it seems to work.

  
  

  Turns out I had  45% !important; applied to my menu left in the regular CSS so it was forcing that width in the handheld device resolutions. I took out the !important in descktop CSS and then placed the following code under the responsive CSS for tablets portrait & landscape resolutions & mobile tall & wide.

  
  

  #Top_bar #menu {

  width: 100%;

  bottom: auto;

  top: 90% !important;

  height:1000% !important; /* This just made my menu really long so it looks like it covers the whole page*/

  right: 1px;

  position: absolute;

  margin: 0px;

  background: rgba(150,130,100,0.9) !important;}

  
  

  .header-split #Header .top_bar_left .menu_left {

    text-align: center !important;

    width: 100%!important;

  }

  
  

  Hope this helps others in need.

  Cheers.

  /R