Hamburger Nav Bar Menu Display on iPad

arcentoni

As it is now, my nav bar links on mobile are collapsed into a hamburger menu, but on iPad, they are not. Which leads to them being cluttered and stacked in an very unappealing way. I'd love to just have the hamburger menu display on iPads as well as iPhones and mobile devices. I was able to make my text logo smaller through CSS code to make some room, but that's it. Please help?

http://adriancentoni.smugmug.com

Hikin' Mike

It isn't a iPad vs mobile, it's screen size. SmugMug uses 736px as the breakpoint. Screen sizes that are 736px or smaller go mobile. Screens larger than 736px go "desktop".

arcentoni

Ah, yes. That makes sense. Well I tried adjusting the size to max 1536 where possible, but it didn't seem to take. What do you recommend?

Hikin' Mike

Looking at your code, you have it wrong:

@media (max-width: 1536px) {
    .sm-user-ui .sm-page-widget.sm-page-widget-nav .sm-page-widget-content {
        padding: 0 !important;
    }
    @media (max-width: 1536px) {
        .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-text.sm-page-widget-logo-s {
            font-size: 22px;
        }
    }
}

It should be this:

@media (max-width: 1536px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-nav .sm-page-widget-content {
    padding: 0 !important;
  }

  .sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-text.sm-page-widget-logo-s {
    font-size: 22px;
  }

}

arcentoni

Doesn't change anything. That's a bummer. Any advice?

Hikin' Mike

@arcentoni said:
Doesn't change anything. That's a bummer. Any advice?

What are you trying to do? Your logo text changes from 32px to 22px when the screen changes from 1537px (32px) to 1536px.

arcentoni

Just trying to have a hamburger menu appear on any screen 1536 and smaller. Yeah, I can tell some stuff is conflicting. But that's definitely not intentional.

arcentoni

And yes. I had the logo text change to slightly smaller on those sizes so that it wouldn't be on two lines as it was appearing before on an iPad. (See photos below) At 22px, it's in one line and doesn't stack up. Because I want my hamburger menu to appear on here as well.

Hikin' Mike

@arcentoni said:
And yes. I had the logo text change to slightly smaller on those sizes so that it wouldn't be on two lines as it was appearing before on an iPad. (See photos below) At 22px, it's in one line and doesn't stack up. Because I want my hamburger menu to appear on here as well.

I don't own a mobile or an iPad, so I can't help. Simulating an iPad on my Windows 7 machine:

arcentoni

Right, that looks pretty clunky. Trying to figure out how I can change the nav bar there to a hamburger menu, as it appears on smaller screens?

Hikin' Mike

@arcentoni said:
Right, that looks pretty clunky. How can I change the nav bar there to a hamburger menu, as it appears on smaller screens?

The only way your going to force a different breakpoint is to create your own menu using a HTML/CSS Block. Like a said earlier, SmugMug defines this breakpoint, nothing we can do unless you do you're own menu.

May be interested in something like this: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Off-Canvas-Navigation-Menu-For-SmugMug

arcentoni

Ah, I see. Thanks for the resource!