Forums » Theme: Twenty Seventeen » Toggling mobile menu

  • Hello,

    I can’t provide a link of the page because it is of my company and it’s still hidden. Nevertheless, the question is very short and simple:

    Where in the theme’s code is a part that triggers a change of the menu to mobile view (at what width)?

    I would like to insert additional view so that instead of mobile – desktop version I would have mobile – tablet – desktop version. So, where is the code (.js, .php files that deal with that)?


Viewing 4 replies - 1 through 4 (of 4 total)
  • I think it is a css thing. Someone else might be able to refine this answer.

    For example,

    @media screen and (min-width: 48em) 
    @media screen and ( max-width: 48.875em ) and ( min-width: 48em )

    You find it in style.css

    The width is definable as you wish, as in the examples. You would define the max width for the mobile, the min width for the desktop and the max and min for the tablet. I hope that helps.

    Thread Starter iboregua


    Thank you Davis,

    However, I’d like to diminish width of the device where the top-menu gets it’s button and menu-toggle class (toggles between mobile and desktop). Now the widest screen that has the menu button is 767px (at 768px = 48em jumps to desktop version). I would like set this change to +- 600px (37.5em). Then I would make the changes you proposed for the tablet and desktop versions.

    Let’s explore more 🙂


    The toggle point is a javascript thing, I think. You will have to look at the code in more detail. I just don’t have the time at the moment.

    I would just play with the settings to get what you want.

    Sorry I cannot be more help.

    Thread Starter iboregua


    Thank you Davis for your help! I’ll take a closer look at .js. But there’s a lot. I was looking for “menu-toggle” string yesterday. But I didn’t find the point of decision. For now 🙂

    Have a nice day, if I’ll find the solution I’ll be back. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Toggling mobile menu’ is closed to new replies.