[Resolved] Reduce size before responsive mobile menu appears

Home Forums Support [Resolved] Reduce size before responsive mobile menu appears

Home Forums Support Reduce size before responsive mobile menu appears

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #134678
    James

    Hi there,

    I’m designing my website using your theme and so far it’s going great! Just have one quick question for you at the moment. I’m happy for the Menu to disappear and be replaced with the symbol and drop down on mobile devices, but as I’m only going to have a few nav buttons on the bar I’m looking for a way to keep it as a full menu on tablets.

    Is there a way to do this? I’ve looked at the style css and at the bottom there appears to be some width resolution numbers that match the resolution of an iPad but changing them doesn’t seem to make a difference.

    Many thanks!
    James

    #134719
    Tom
    Lead Developer
    Lead Developer

    Hi James,

    Kind of a tricky one!

    This CSS should do it: https://gist.github.com/generatepress/bcabe916b1d63330149b

    It will make sure the regular menu displays until you hit 767px (mobile devices) – then it will kick in.

    Let me know if you need more info πŸ™‚

    #134739
    James

    Hey Tom,

    Thanks very much for that! Nearly worked perfectly. One small problem is that although the menu is now displaying as words rather than the menu drop down (which is great), the menu items are stacked vertically rather than side by side.

    Result of the code you kindly provided:
    Code result

    What I’d actually like it to look like if possible:
    Look that I would like

    #134780
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to the site?

    #136063
    James

    Hi Tom,

    I’d love to but the site isn’t live yet unfortunately. πŸ™

    Any ideas? The photos should be showing up above now.

    Many thanks!
    James

    #136066
    Tom
    Lead Developer
    Lead Developer

    Hmm, the code I provided should take care of that (tested it on my install).

    Is the site on a live server? If so, it would be great to get some login credentials to support@generatepress.com so I could see why the code isn’t doing what it should be doing.

    Let me know πŸ™‚

    #136079
    bdbrown

    Hi Tom. I’m running v1.3.12 and the mobile menu doesn’t kick in until 767px which is defined in a media query in mobile.css. If the OP is running the current version shouldn’t it keep the full menu on the iPad by default?

    #136080
    Tom
    Lead Developer
    Lead Developer

    768px technically applies to portrait mode tablets as well as mobile.

    767px is the “official” size at which screens become mobile.

    #136082
    bdbrown

    ok, thanks.

    #136083
    Tom
    Lead Developer
    Lead Developer

    No problem. I figure showing the mobile menu on portrait mode is a good idea – there’s not a lot of horizontal space for most navigation items to fit. I wonder how others feel about this.

    #136104
    bdbrown

    As a general rule that’s probably a safe bet as most sites have several items in the menu and forcing the menu to multiple rows is ugly and screws up the layout. Maybe you could add a user option in Customizer > Layout like “Display desktop menu in mobile view”.
    No (default) – load the current mobile.css
    Yes – load mobile2.css which sets the breakpoint at something like 420px

    Should I add that in the Suggestions forum?

    #136122
    Tom
    Lead Developer
    Lead Developer

    That could work – it would require another CSS file to load though, which does slightly affect load times.

    Might be a good way to go about it though.

    #136292
    Tom
    Lead Developer
    Lead Developer

    Ah, this was happening because you had your menu centered – I didn’t add some specific CSS for that.

    I made the change and it looks good now.

    Let me know πŸ™‚

    #136300
    James

    That looks perfect Tom! Thank you very much for your help. πŸ™‚

    #136363
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.