• When loading a page between 720px and 959px width (or resizing the window) the topbar and header menus are always expanded in an ugly way.

    It looks like this: image

    I have a child theme with media only css changes but they should overwrite the styles from the hueman parent theme (version 3.20).

    My blog

    • This topic was modified 8 years, 5 months ago by JackGraal.
Viewing 6 replies - 1 through 6 (of 6 total)
  • WoW can you please tell me how you made your blog like that. Please

    Thread Starter JackGraal

    (@jackgraal)

    Hi bdbrown,
    I’ve seen this topic before, but it didn’t help.

    In the hueman theme main.css there is something like this:

    
    @media only screen and (min-width: 720px) {
    
      .nav-wrap { height: auto!important; }
    

    which might be part of the problem. While overwriting the media query in child theme to (min-width: 960px), the lower width is still using the parent media query of 720px because of !important.

    The devs never really acknowledge it when someone asks about changing the break point of the mobile menu. I’ve tried to manually change the breaking points but you have to dig into a lot of css and possible even some javascript.

    I see your site has the mobile menus when you’re at 720px (ipad) but they don’t actually work (not sure if you know that). You can open the top one but it doesn’t close, at least when I use Chrome inspect element.

    Thread Starter JackGraal

    (@jackgraal)

    As I said, the problem occurs only between 720px and 959px. The hueman theme’s break point is 720px, my child theme changes it to 960px.

    Thread Starter JackGraal

    (@jackgraal)

    I’ve switched all media query elements in main.css from 719px & 720px to 959px & 960px. It fixes the problem, but I’ll need to do that after every parent theme update ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menus always expanded on some resolutions’ is closed to new replies.