Change menu breakpoint

  • Resolved jstneti

    (@jstneti)


    9 years, 2 months ago

    I’ve created a child theme from Sparkling and I want to change the original (bootstrap) breakpoint in the menu from 768px to 850px.
    Since bootsrtap uses min-width(768px), I tried using max-width(850px), but I just can’t figure out all the right things to fix.
    I tried to copy the boostrap.css and bootsrtap-min.css in the same folder in my child theme, but it still reads from the parent theme.
    Anybody tried this before?

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @jstneti,

    I hope you are well today and thank you for your question.

    By default in the Sparkling theme the mobile navigation menu is displayed on the screen size smaller than 768px so do you want to change it to display on the screen size smaller than 850px and could you please tell me why you want to do this so that i can help you to achieve it?

    Kind Regards,
    Movin

    Thread Starter jstneti

    (@jstneti)

    Hi,

    For now I fixed my problem with another trick but I’m still wondering how would I do that.

    Yes you got it right. I want it to hide normal menu and display mobile menu under 850px. The reason is that the menu is too wide and under 850px it goes in two lines which doesn’t look good.
    I know it’s a theme based on bootstrap and I should have thought of this before, but the theme was not my decision. Although I have to say I like your theme and thank you for making and maintaining such a great and not bloated free theme.

    But do you have any recommendations how would I achieve this?
    Because so far I’ve only come up with the idea of manually changing the break-point in bootstrap file in the parent theme and do this every time an update comes, which is definitely not ideal.

    Kind Regards,
    Vale

    Kimberly

    (@kellogg9)

    curious..why dont u just include your own css file via wp_enqueue_script(..) with a low priority (e.g. 99) which will ensure it gets included after the bootstrap and in this file u writing the exact same conditions for the 768 @media queries, same selector, same property but with default values that equate to what they were pre 768 (to get the values back to a normal state). And then below this officially add your @media queries for 850.

    Alternatively, you could dequeue the bootstrap script entirely and enqueue your own css making sure it has an exact copy of cotents of the bootstrap css but with modified @media queries for 850 instead of 768.

    Kimberly

    (@kellogg9)

    jquery to modify the 768 rules after doc ready/bind would be another ez option

    Free WP TP

    (@freewptp)

    Hi Kimberly,

    Thank you for helping here in this this forum.

    Your help here is really appreciated.

    Thanks,
    Movin

    Free WP TP

    (@freewptp)

    Hi Vale,

    I hope the solution posted by Kimberly in her above replies will help you to achieve it but please advise if you have more questions.

    Cheers,
    Movin

    Thread Starter jstneti

    (@jstneti)

    Hi Kimberly,

    I didn’t know I could dequeue files from parent theme.
    I still got a lot to learn.

    Thanks a lot for your answer.

    Free WP TP

    (@freewptp)

    Hi @jstneti,

    You will find more information about dequeuing script and stylesheet files on the following pages.

    https://codex.www.ads-software.com/Function_Reference/wp_dequeue_script
    https://codex.www.ads-software.com/Function_Reference/wp_deregister_script
    https://themify.me/docs/enqueue-scripts

    Cheers,
    Movin

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Change menu breakpoint’ is closed to new replies.