Media queries aren’t working

  • Resolved Cashlin

    (@cashlin)


    4 years, 3 months ago

    Hi everyone — I’ve been trying to get my media queries to work and it looks like the Custom Styling is only registering whatever CSS is on the bottom:

    @media only screen and (min-width:1200px) {
  #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 22.8px 10px 22.7px!important;
    font-size:18px!important;
  }
}
@media only screen and (min-width:992px) {
  #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 16.5px 10px 17px!important;
    font-size:14px!important;
  }
}

    I also tried this:

    @include desktop {
  #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 22.8px 10px 22.7px!important;
    font-size:18px!important;
  }
}
@include mobile {
  #{$wrap} #{$menu} > li.mega-menu-item > a.mega-menu-link {
    padding: 0px 16.5px 10px 17px!important;
    font-size:14px!important;
  }
}

    Neither seem to be working. What am I doing wrong?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi cashlin,

    Both examples you’ve pasted look like they should work (although the second one would only work if you pasted the CSS into the Mega Menu > Menu Themes > Custom Styling area).

    Please can you post a link to your site so I can take a look?

    Regards,
    Tom

    Thread Starter Cashlin

    (@cashlin)

    Sure but… I actually don’t know how to list the login info privately to you? You can’t see the site since I have a coming soon plugin up.

    Plugin Author megamenu

    (@megamenu)

    Hi Cashlin,

    Please let me know as soon as the site is online (or put it on a temporary URL that you can change later) and I will take a look.

    Regards,
    Tom

    Thread Starter Cashlin

    (@cashlin)

    The URL is https://soniclegacyonline.com
    It’s available to look at right now. Thanks for responding. I appreciate it.

    Plugin Author megamenu

    (@megamenu)

    Hi Cashlin,

    Thanks. If I inspect the menu it looks like it is working correctly:

    2020-08-12_09-58-05

    If you are not seeing the same thing, please try clearing your browser cache.

    Regards,
    Tom

    Thread Starter Cashlin

    (@cashlin)

    Hi again — the include media query in the megamenu is only respecting the smaller screen size and smaller font.

    At full size, the menu is supposed to have bigger text that stretches across like in my static HTML version here: https://soniclegacyonline.com/dr/

    Then when the screen is smaller, the text and padding decreases.
    And then of course it switches to the hamburger toggle on mobile.

    But it’s not doing this? This is why I don’t know what’s going on? What I am doing wrong?

    Thread Starter Cashlin

    (@cashlin)

    I solved this. I had to swap the order of the media includes for them to be read correctly.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Media queries aren’t working’ is closed to new replies.