Book Image

Learning Magento Theme Development

By : Richard Carter
Book Image

Learning Magento Theme Development

By: Richard Carter

Overview of this book

Table of Contents (15 chapters)
Learning Magento Theme Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Developing responsive navigation


Another critical area for all customers is your navigation—they need to be able to find the products they are looking for easily, after all. Mobiles, tablets, and devices with smaller screens present new challenges in terms of how to present the navigation in a clear way so that users on touchscreen devices will find it easy to interact with.

Firstly, you will need to move the current navigational styling in to the media query for larger screens. So, copy the following CSS code in to the media query you created earlier in this chapter:

@media only screen and (min-width: 50em) {
  #nav li.over{z-index:998}
  #nav a,#nav a:hover{display:block;line-height:1.3em;text-decoration:none}
  #nav span{cursor:pointer;display:block;white-space:nowrap}
  #nav li ul span{white-space:normal}
  #nav ul li.parent a{background: none}
  #nav ul li.parent li a{background-image:none}
  #nav a{color:#333;float:left;font-weight:700;padding:5px 12px 6px 8px}
  #nav ul li,#nav ul li...