Dropdown menu disappears in Twenty Twelve (3 posts)

  1. tundeszentes
    Posted 2 years ago #

    My problem is that in Twenty Twelve the dropdown menu dissapears before the cursor reaches next tab, and I can't acces the items in dropdown menu. I think I need to modify something in css (.main-navigation li ul li a), but I can't figure out what. Here is my website.

  2. paulwpxp
    Font hero
    Posted 2 years ago #

    It's caused by too much negative margin on .main-navigation li a:hover.

    Also, it seems all the changes are done directly to theme stylesheet (instead of Custom CSS plugin or Child Theme) making it hard to debug. Please consider transfering over all the changes to Custom CSS plugin (or Child Theme), and restore the theme itself to original.

    Child theme


    Custom CSS plugin

    Try this code ( work with original Twentytwelve's. )

    @media screen and (min-width: 600px) {
    	.main-navigation ul.nav-menu { text-align: center; }
    	.main-navigation ul.nav-menu > li { margin: 0px; display: inline-block; }
    	.main-navigation ul.nav-menu > li a { padding-left: 17px; padding-right: 17px; color: #f55454; }
    	.main-navigation ul.nav-menu > li a:hover { background: #d92645; color: #fff; }
    	.main-navigation ul ul { text-align: left; }

    This is to properly downscale the logo for small screen.

    @media screen and (max-width: 600px) {
    	.logo { width: 259px; height: 49px; } /* proportion 370x70 */
    	.site-description { width: 259px; text-align: right;margin:0 auto; }
  3. tundeszentes
    Posted 2 years ago #

    Thank you for your kindness and for the answer. On the way I realized that I made a lot of mistakes in my CSS, so I rearranged it. Now everything works fine. Thank you again!

Topic Closed

This topic has been closed to new replies.

About this Topic