WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Width At Which Menu Becomes Responsive or Toggles (10 posts)

  1. Design Locker
    Member
    Posted 8 months ago #

    Hello All,

    I am trying to change the width at which my menu toggles, ie, changes from normal menu to button.

    At the moment it seems to toggle on all screens under 599px.

    Due to the size of my menu (number of items) I need it to become responsive(toggle) at 768px?

    See http://www.dhk.ie/

    Any help would be great?

  2. markusjj
    Member
    Posted 8 months ago #

    Hi there, I'm not sure if this is what you are looking for, but have you seen this excellent code snippet from Dave? It should be your starting point of course.

    And if you use any developers tool/code inspector, such as firebug, then I believe you should be able to modify your child theme accordingly. Hope this gives you a few ideas and hints...

    Cheers,
    Markus

  3. ryansantschi
    Member
    Posted 8 months ago #

    Your parent theme twenty-twelve is a mobile first layout (styles are declared for small-screen view and as media queries deal with larger screens). Your child them Revision Courses is desktop first (styles declared for big-screen view and media queries deal with smaller screens).

    So Twenty-twelve has styles kicking in once it is bigger than 600px and the child theme has different styles kicking in once its smaller than 770px. All the style changes that are happening at 600px (@media screen and (min-width: 600px)) in twenty-twelve need to be redeclared in your child theme's style and kind of undone by declaring the values those menu elements had before the @media screen and (min-width: 600px). An example would be parent theme's style @media screen and (min-width:600px){ .main-navigation li a{ display: inline-block; ...}} needs to be declared and changed in child them @media screen and (min-width:600px){ .main-navigation li a{ display:block;...} }

    Once you've undone the style changes the parent theme was adding at min-width:600x; you need to re-declare them where you want e.g. @media screen and (min-width:725px){ .main-navigation li a{ display:inline-block;...} }

    Best keep to child themes that are mobile first if the parent theme is.

  4. Design Locker
    Member
    Posted 8 months ago #

    Thank you both for your replies.

    @ryansantschi - thank you for such an in depth analysis of the theme. I totally forgot the "mobile first" approach of twenty twelve which you pointed out. I will take your suggestions on board and post back once I have tried them.

  5. Design Locker
    Member
    Posted 8 months ago #

    Hello Again,

    I seem to be 50% there. This is what I have done;

    @media only screen and (max-width: 770px) {
    
    .main-navigation li a,
    	.main-navigation li {
    		display: block;
    	}
    
    	.menu-toggle {
    		display: block;
    	}
    }

    The issue now is that the "menu" is always open (expanded). I do not have to click on the word "Menu" to open it. All "li" items just appear under each other.

  6. Design Locker
    Member
    Posted 8 months ago #

    Baffled, have spent close on ten hours at this now and nothing. Everything above 768px works as I want and everything below 600px works as I want.

    It is just both 768px & 600px that the toggle menu is always expanded, ie, all menu items visible as a list. I do not need to tap "Menu" to open the menu.

    See http://www.dhk.ie on small screen to view issue.

  7. Andrew
    Forum Moderator
    Posted 8 months ago #

    What do you want to happen at 600px, do you want the menu to be hidden or the toggle button to be hidden?

  8. Design Locker
    Member
    Posted 8 months ago #

    Hi Andrew,

    Thanks for the reply.

    At 768 (and below) I want the menu to hide and the toggle button to appear . As it stands, the menu appears vertically in full without the need to press "Main Menu".

    I want it to work at 768px & 600px as it currently does at 568px and below?

  9. Andrew
    Forum Moderator
    Posted 8 months ago #

    Does this help:

    @media screen and (min-width: 600px) {
    
     .main-navigation ul.nav-menu,
     .main-navigation div.nav-menu > ul {
      display: none !important;
     }
    
     .main-navigation ul.nav-menu.toggled-on {
      display: inline-block !important;
     }
    
    }
    
    @media screen and (min-width: 771px) {
    
     .main-navigation ul.nav-menu,
     .main-navigation div.nav-menu > ul {
      display: inline-block !important;
     }
    
    }
  10. Design Locker
    Member
    Posted 8 months ago #

    Andrew, if you were beside me I would kiss you. Genius. Thank you so much.

    I played around with what you said above and this is all that was required to get it working;

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

    It is people like you that make WordPress so successful. Thanks again.

Reply

You must log in to post.

About this Theme

About this Topic