Responsive function behaves oddly. (8 posts)

  1. TMNR
    Posted 3 years ago #

    I styled my main menu to be inline and centered, it works on 617px+ window size. However, when the window hits 616px mark, my change is overwritten by something and I cant figure out what (plus some other undesired properties are set). This is very strange, because in CSS, under =Responsive, there are only 3 marks (as it is common) - 1200px, 800px and 600px. When the page hits 600px width, it rearranges again, but the menu stays displayed wrong.

    Please help me find what is causing this issue and how to style my menu past 617px and 600px. Also I would really like to know where is the trigger that takes effect at 617-616px.

    Link: http://mududizainas.lt/mudu/


  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Why is there so much stuff in your Child Theme style.css file?

  3. TMNR
    Posted 3 years ago #

    Because I modified allot of stuff. Why do you ask?

  4. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    It's a lot harder to track down what you have done.
    Please make it easier for us to identify the styles that aren't working (at certain widths).

  5. TMNR
    Posted 3 years ago #

    Sorry, I'm not very good at expressing what I need.

    I cleaned up the code a bit, here's the main issue:
    When window is shrunk and passes 617px mark, something kicks in and changes things. Past 600px mark, it changes again, this time I know it's the media query in original style.css supported by the same query in my child style.css. What happens between 600 and 617px?

    The menu is being set to display: none;, according to firebug this is accomplished by line 560 in the original style.css, but why does it happen - I don't understand.

  6. WPyogi
    Forum Moderator
    Posted 3 years ago #

    Does the original Spun theme behave this way?

  7. TMNR
    Posted 3 years ago #

    Past 617px the menu is converted to a small text menu button.
    Then at 600px something happens again.

  8. TMNR
    Posted 3 years ago #

    I found a solution.
    Not the prettiest one, since I did not want to make changes to main theme, hence the child-theme, but that will do.
    In theme folder/js/toggle.js I deleted all the code under:

    //Toggle the the main navigation menu for small screens.

    That seemed to do the trick. Bot now when (if) I update the theme, I will have to deal with this again.

    If you have any other, more clever, suggestions, please do share.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic