Mobile Menu Transition

  • Resolved thtgyrl

    (@thtgyrl)


    3 years, 10 months ago

    Hello,

    I used a plugin to add a small search form to the navigation menu. On all pages, except the home page, the form gets push to the left and underneath the other menu items when screen shrinks to a certain size. I would like to set the main menu to transition into the mobile menu before this happens. How would I accomplish that?

    Thank you,
    Jessica

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @thtgyrl,

    The thing in the CSS that specifies which screen size to change something at is called a media query, and unfortunately, there’s no simple way to change the width at which a media query is activated.

    You can change the width directly in the style.css file in the theme, by going to line 3386 (in the latest version) and change:

    @media ( min-width: 1020px ) {

    to:

    @media ( min-width: 1200px ) {

    …which would result in the mobile menu switching to the desktop menu at 1200px screen width instead of 1020px. This change would be overwritten the next time Miyazaki is updated, however, and you would need to make the change again.

    The best way to make changes to a theme is with a child theme – that way, the changes persist after the parent theme (Miyazaki, in this case) is updated. There is no easy way to change a media query in a child theme, however.

    I think the easiest solution in your case would be to either reduce the width of the form in the header, or reduce the number of items in the main menu, and prevent the form from getting pushed down that way. Adjusting it in code is probably not worth the hassle for you.

    — Anders

    Thread Starter thtgyrl

    (@thtgyrl)

    I reduced the padding on the category section and it fixed everything! Thanks a bunch!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Menu Transition’ is closed to new replies.