Top Bar settings


(Lisa Sandler) #1

@tav @joeworkman what did I hit by accident in settings? My parent menu (example - “Details”) isn’t showing up on IPad Portrait mode. It does show up on iPhone. https://www.lisasandlerphotography.com

thanks :slight_smile:


(Doug Bennett) #2

Did you try hitting the back at the top? Works for me on Chrome simulator.


(Lisa Sandler) #3

The back button just takes me back to the menu.


(Doug Bennett) #4

Tried again and your right at about 641px the detail drops off. Around 780px your full menu appears. At 641px the main menu (detail not selected) the divider lines drop off.

Something is happening at the 640px breakpoint.


(Lisa Sandler) #5

Yeah, the breakpoint is what I changed (to 780), because the menu wouldn’t fit across on portrait iPad screens. But it shows up fine on iPhone. Just not iPad portrait.


(Doug Bennett) #6

Something is still hanging on to that old 640px breakpoint.
Looks like the class
hide-for-medium-up
Is setting the display to none at the 40.063em breakpoint (640px).


(Lisa Sandler) #7

IDK. I’ll wait for Andrew to check it out.


(scott williams) #8

Here is what I see on my actual iPad


(Lisa Sandler) #9

Yes, that is fine. But what happens when you click on “details” on iPad portrait? That is where the issue lies. Do you then see the “details” menu? or does it disappear?


(scott williams) #10

Is this what I should see or no?


(Lisa Sandler) #11

No. The details menu is missing. Look at my original post and the difference in iPad portrait and iPhone


(Doug Bennett) #12

You can see it on your Mac. Just shrink your browser (chrome or safari) down to less than 640px wide open the hamburger menu, open detail, and stretch the browser window open, and you’ll see it disappear. Shrink it back down and it reappears.


(scott williams) #13

Ah, I see. I thought that was just a header/placeholder, didn’t realize there was a page “details”.

Do you have any @media CSS statements in your sitewide code?


(Lisa Sandler) #14

I didn’t change anything except the breakpoint as noted above. Was working before.

Found this… can that be it? Nope. Didn’t change anything.

@media screen and (max-width: 640px){
.com_stacks4stacks_stacks_lister_stack *{
font-size: 0.95rem!important
}


(Doug Bennett) #15

The class
hide-for-medium-up
Is setting the display to none at that breakpoint. That is probably a foundation class.
It probably appeared to work before because you may have had your breakpoint set to mobile or small, so hiding for medium up would be OK.
But since your full menu is larger than 640px it wrapped to a second line.

Think this is one for @joeworkman or @zeebe to take a look at.


(Lisa Sandler) #16

Yes, foundation. Will wait to hear from one of them. I did tag Joe in the OP.


(Dylan Banks) #17

I think the reason it’s not displaying on iPad in portrait mode is because you’ve set the full menu breakpoint to 780. An iPad Air’s screen size is 768x1024.


(Doug Bennett) #18

The problem drop down menu appears differently from <640px then between 640px and the 780px breakpoint to full menu.
It’s not that it doesn’t appear.


(Lisa Sandler) #19

It was pushing the menu below the logo at that breakpoint, so I made it larger.


(scott williams) #20

I think you are correct Doug (@teefers)

li.parent-link.hide-for-medium-up{
display:inline-block !important;
} 

brings it back. haven’t had time to investigate in TopBar what setting controls it yet. Maybe later today I can have a look.