• Hi!

    As I understand it, Customizr has its own media queries that change the appearance of the navbar. I managed to make my own modifications to the media queries through a child theme, but now I am trying to do something more complex and I am not sure it is possible.

    Basically I don’t like that around 1000px of width the mobile menu already pops up, and I would prefer if the relative meda query would activate at 800px, or just when someone is using a mobile/tablet.
    I don’t think re-writing the whole media query in my child theme would be an efficient way to solve this, but if I modify the .css in the theme itself, I’m going to lose that on every update.

    Is there any way to fix this? Like, using the child .css to kind of change the whole premise of the media queries from the main .css, or to cancel them completely?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Simone T

    (@simone-t)

    Up, anyone know about this?

    I think you should override parent media queries for the menu in your child-theme style.css

    Thread Starter Simone T

    (@simone-t)

    Can you elaborate what you exactly mean on that?
    Do you mean I should modify the original files and just delete the media queries from them?
    Or is there any way to put something in the child theme’s css that says “ignore THIS and THAT specific media queries”?

    I also do not know what “PARENT” media query means, or maybe I do but I did not notice where they are in the main css file. Is that like a media query that has other media queries inside?

    I meant, the media queries of the parent theme css.
    You can do what you want, even modify the original files, it’s up to you 😀 Is discouraged ’cause when you update the theme:
    a) if you modified the original files in the parent theme, you will lose your changes
    b) if you modified copies of the original parent files in your child-theme then you’ll lose possible improvements of the updated parent theme, ’cause they will get overridden.

    “ignore” THIS and THAT no, cannot do something of the sort with CSS, you can just override rules.

    Hope this clarifies 😀

    Thread Starter Simone T

    (@simone-t)

    Ok so basically the only thing I can do is just delete the lines of code in the css of the original theme, is it?
    Or is there any other way of overriding those media queries?

    Thanks for your help 🙂

    Override them in your child theme, not remove them from the original theme.
    To override mediaqueries (but in general) say there’s a rule, in the parent theme, like:

    @media (max-width: 979px){
       some_element { display: none;}
    }

    you probably want, in your child-theme style.css, something like

    @media (max-width: 979px ) and (min-width: 801px){
       some_element { display; block; /*or inline-block, or list-item, or inline, it depends on the element*/}
    }

    and so on ..
    this is enough, because the child style is loaded after the parent style, a rule with the same specificity in the child overrides the one in the parent

    Thread Starter Simone T

    (@simone-t)

    Oh yeah I knew that it’s just there is a lot of rules and I was looking for a way to avoid making the custom css unnecessary longer. But it’s certainly the cleaner way to a tidy end result.
    And it didn’t come to mind that you can override more media queries that go from max width A to B, B to C and C to D, with just one media query that goes from A to D 😀
    I’ll try to think and see if I can arrange everything in an organized way.

    Thanks again!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Change/Remove the responsiveness of Navbar’ is closed to new replies.