iphone menu

• 

  bishoyscopticblog · Member · Jan 30, 2015 at 10:53 am

  • Copy link
  • Add topic to favorites

  On my iphone all i can see is the word menu
  how do i get the full desktop menu on iphone

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 30, 2015 at 6:45 pm

  • Copy link

  Hi there, the full desktop menu will not work well on touch devices, such as phones and tablets when you have submenus, since you touch the top level item and it opens instead. That is the reason for the dedicated touch menu where all menu items are shown as top level.

• 

  bishoyscopticblog · Member · Jan 31, 2015 at 6:32 am

  • Copy link

  Hey thanks but i worked out the code for everything i need including putting the header above the menu on desktop, ipad, iphone

  @media screen and (min-width: 992px) {
  .main-navigation {
  position: absolute;
  top: 295px;
  left: 286px;
  }

  div#main {
  margin-top: 50px;
  }
  }

  @media screen and (max-width: 667px) {.main-navigation {
  position: absolute;
  top: 120px;
  left: 5px;
  }

  div#main {
  margin-top: 50px;
  }
  /*****************
  ** Main Stylings
  ******************/
  nav {
  width: 9em;
  border-right: 0 solid #999;
  float: left;
  position: relative;
  }

  nav ul {
  font-size: 0.9em;
  float: left;
  padding: 0;
  margin: 0.1;
  list-style: none;
  display: inline-block;
  width: 100%;
  }

  nav a {
  display: block;
  color: white;
  line-height: .3em;
  text-decoration: none;
  padding: 0;
  position: relative;
  }

  /*****************
  ** menu indicator
  ******************/
  nav ul li a.parent {
  background: url(‘closed.gif’) no-repeat right center;
  }

  nav ul li:hover > a.parent {
  background: url(‘open.gif’) no-repeat right center;
  }

  /*******************
  ** background color
  ********************/
  nav {
  background: white;
  }

  nav ul li ul {
  background: white;
  }

  /*******************
  ** hover properties
  ********************/
  nav ul li:hover {
  width: 9.555555em;
  background: white;
  }

  nav ul li ul li:hover {
  width: 10.617283em;
  }

  nav ul li ul li ul li:hover {
  width: 11.796982em;
  }

  /*transition actions inspired from http://www.greywyvern.com/?post=337 */
  nav ul li > ul {
  position: absolute;
  left: 100%;
  margin-top: -2.35em;
  visibility: hidden;
  opacity: 1;
  -webkit-transition: visibility 0 linear .4s;
  -moz-transition: visibility 0 linear .4s;
  -ms-transition: visibility 0 linear .4s;
  -o-transition: visibility 0 linear .4s;
  transition: visibility 0 linear .5s;
  }

  nav ul li:hover > ul {
  visibility: visible;
  opacity: 1;
  -webkit-transition-delay: .4s;
  -moz-transition-delay: .4s;
  -ms-transition-delay: .4s;
  -o-transition-delay: .4s;
  transition-delay: .4s;
  }

  /**********************
  ** touch screen fixes
  ***********************/
  /*gives our “z” tag the same stylings as the “a” tag. It covers the “a” tag so that one touch will highlight.*/
  nav z {
  display: block;
  line-height: .5em;
  position: relative;
  width: 100%;
  margin-top: .5em;
  height: .5em;
  }

  /*make the “z” tag disappear after hovering for 0.3s. One touch will highlight the item, two touches will select the “a” tag link. Some devices/browsers may need a longer delay time*/
  nav > ul > li > z {
  -webkit-transition: width 0 linear .4s;
  -o-transition: width 0 linear .4s;
  -moz-transition: width 0 linear .4s;
  transition: width 0 linear .4s;
  }

  nav ul ul > li > z {
  -webkit-transition: width 0 linear .4s;
  -o-transition: width 0 linear .4s;
  -moz-transition: width 0 linear .4s;
  transition: width 0 linear .4s;
  }

  nav li:hover > z {
  width: 0;
  }
  }

  @media only screen
  and (min-device-width : 768px) and (max-width: 850px)
  { .main-navigation {
  position: absolute;
  top: 180px;
  left: 20px;
  }

  div#main {
  margin-top: 50px;
  }}}

• 

  kevmarsden · Member · Feb 3, 2015 at 4:00 am

  • Copy link

  Hello,

  Thanks for the update. If you have any outstanding questions, please let us know. Thanks!