SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    0 Post(s)
    0 Thread(s)

    Menu not opening in small windows

    I tested on a iphone and my drop down menu did not open.
    At first I thought this issue was related to mobile browsers. Then I tested on an iPad and it did work. This confused me!
    I just tested on my computer and made the browser window small. The menu did not open.
    It happens when the menu pops up to the top right and gets slightly smaller. This seems to be when the window is about 610 pixels wide.
    Any ideas on how to fix this?

    Also any suggestions on how to handle the menu on really small screens such as phones, it starts to flow to 2 rows when the window gets down to 400 pixels wide


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    182 Post(s)
    6 Thread(s)

    The submenu has been turned off at small screen sizes in the media query.

    #branding #mainnav ul ul {
    	display: none;
    #branding #mainnav ul ul ul {
    	display: none;
    #branding #mainnav ul ul a {
    	display: none;
    The reason is that dropdown menus on small windows are very hard to use - if they work at all. There is no such thing as hover on ipads/iphones although a first touch is sometimes seen as a hover on focusable elements but what happens is the menu comes on but won't switch off and stays in the way unless you navigate away.

    Therefore most responsive sites get rid of large dropdowns at small window sizes. The top level of a menu should always link to a page where the sub menus are available anyway.

    Some sites do use a single button dropdown for mobile but will need to be handled with some scripting.

    More info:


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts