WordPress.org

Ready to get started?Download WordPress

Forums

Apply responsive menu button to wider displays (7 posts)

  1. Runtheball
    Member
    Posted 1 year ago #

    I'm trying to apply the menu button (that normally only shows on mobile devices) to screens up to 722px wide. I have the button appearing up to 722px, but it doesn't function above 617px viewport width. It works fine below 617px width.

    http://prismatic-solutions.com/staging2/

    This is twenty twelve with a child theme. I'm guessing my media queries must have interfered with the menu.toggle-on styling, but I don't see how to fix it.

  2. Runtheball
    Member
    Posted 1 year ago #

    Anyone?

  3. CrouchingBruin
    Member
    Posted 1 year ago #

    The menu button is showing up at 722px, but you have a rule for .main-navigation ul.nav-menu.toggled-on under the 722px section for display: none;. Try taking out the selector from that rule and moving it to the rule below, which has display:inline-block !important;.
    From this:

    @media screen and (min-width: 722px)
    {
    	.main-navigation ul.nav-menu.toggled-on, .menu-toggle {
    		display: none;
    	}
    
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    		display:inline-block !important;
    	}

    To this:

    @media screen and (min-width: 722px)
    {
    	.menu-toggle {
    		display: none;
    	}
    
    	.main-navigation ul.nav-menu.toggled-on, .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    		display:inline-block !important;
    	}
  4. Runtheball
    Member
    Posted 1 year ago #

    Thanks, but that didn't seem to have any effect. The menu button still isn't functioning above 617px viewport width.

  5. CrouchingBruin
    Member
    Posted 1 year ago #

    Oops, sorry, I just noticed you're using min-width in your media query and not max-width.

    In the min-width: 600px section, swap the order of these two rules:
    From this:

    .main-navigation ul.nav-menu.toggled-on, .menu-toggle {
    	display: inline-block;
    }
    
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    	display:none !important;
    }

    To this:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    	display:none !important;
    }
    
    .main-navigation ul.nav-menu.toggled-on, .menu-toggle {
    	display: inline-block;
    }
  6. Runtheball
    Member
    Posted 1 year ago #

    Once again, I appreciate your efforts to help. But once again I tried this and it had no effect.

    I can't help thinking that twenty twelve would handle this by default in the base styles, and that I must have done something in my own media queries that is preventing it from working properly. And as it works properly below 617px viewport, then the error I made must be in the min-width 600px MQ. I just don't see it.

  7. Runtheball
    Member
    Posted 1 year ago #

    While your solution didn't fix the problem, it did point me in the right direction. I'm making progress and have the menu button functioning above 617px viewport now. It isn't quite right, but I know I can make it right at this point...just a matter of CSS.

    I don't understand how 2012 makes the dropdown work and look right under 617px but above 617px I have to re-style it.

    In any case, you assistance has allowed me to progress. Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic