[Resolved] Varying mobile break points

Home Forums Support [Resolved] Varying mobile break points

Home Forums Support Varying mobile break points

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1647538
    William

    Hi there,

    I see there is a breakpoint for determining when to go to the mobile theme. For my site, I was hoping there could be other breakpoints too?

    For example:

    – A breakpoint for when the primary navigation menu goes to canvas
    – And then a breakpoint when the theme goes to mobile

    Is this possible?

    #1647557
    Ying
    Staff
    Customer Support

    Hi William,

    – A breakpoint for when the primary navigation menu goes to canvas

    You could easily change it at Layout > Primary navigation > Mobile menu breakpoint.

    – And then a breakpoint when the theme goes to mobile

    It’s very complicated and it’s beyond the scope of the theme support forum.
    Depends on what you want to achieve and if you are using flexbox structure, some CSS might be able to help.

    #1647593
    William

    It seems the breakpoint in the customizer is for doing to the ‘full’ mobile version – I don’t mind that but I want a breakpoint for just the menu going to canvas – is this possible?

    #1647602
    Ying
    Staff
    Customer Support

    The breakpoint in customizer is only for primary navigation, it also works for mobile header if it’s activated.
    https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

    #1647606
    William

    So is there a way to separate these, so the breakpoints can be different?

    #1647661
    Leo
    Staff
    Customer Support
    #1648276
    William

    Just to be clear, GeneratePress only allows for one breakpoint – going all the way from desktop to mobile.

    What I am wanting is to have a breakpoint to allow the menu to collapse to the canvas menu at a predefined width, and then to go full mobile at a smaller width.

    Is there not a @media (min width: ) etc. that could do this in CSS for collapsing the primary menu to canvas?

    If not, is this something with funding you could look to provide into your theme?

    #1648291
    William

    Or is it possible to make sure the navigation menu in blue does not snap to two rows for the header, but instead shrinks the search bar, until it then snaps to mobile? Issue is that on certain widths between mobile and desktop, the menu doubles in its height:

    #1648511
    Leo
    Staff
    Customer Support

    What I am wanting is to have a breakpoint to allow the menu to collapse to the canvas menu at a predefined width, and then to go full mobile at a smaller width.

    Is there not a @media (min width: ) etc. that could do this in CSS for collapsing the primary menu to canvas?

    That should be this option here:
    https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

    But it would change the header to the mobile layout at the same time.

    Or is it possible to make sure the navigation menu in blue does not snap to two rows for the header, but instead shrinks the search bar, until it then snaps to mobile?

    The search bar width and alignment is set by the plugin itself with this CSS:
    https://www.screencast.com/t/m8bPdfvnc

    You can write different media queries to make it smaller. For example:

    @media (max-width: 1000px) {
        #ajaxsearchpro1_1, #ajaxsearchpro1_2, div.asp_m.asp_m_1 {
             width: 50%;
        }
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.