Disappearing Header Bar

Support
#1

Good morning,

My site denverhighriseliving.com is working pretty well, but when I scroll in portrait mode on my iPad, the second line of the menu disappears: https://prnt.sc/j3upqy. Could you please tell me how to fix this?

This code is currently in place:
.my-bar {
z-index: 9999 !important;
background-color: hsl(0,0%,0%) !important;
min-height: 3em !important;
min-width: 100% !important;
}

Thank you,
J

#2

Hi there,

That happens because of this code that you added in the Theme Options’ global CSS:

@media(max-width: 980px){
  .x-bar.x-bar-fixed {
    top: 0 !important;
  }    
}

Please try adjusting the max-width of the code to 767px.

Hope this helps.

#3

Your solution worked for the issue above, but my client is complaining that she is seeing the mobile menu on larger screens. Could that issue be related, or do you think she is just looking on a smaller laptop? I believe she is in the 768 px - 979 px range.

Thank you,
J

#4

Hello There,

The mobile menu in the default navbar will always display when the screen size is smaller than 980 pixels. This is also true when you are using the “Hide During Breakpoints” for the bar and containers. I have check the site and I could not replicate the issue by the way. Please ask your client to clear the iPad’s browser cache or use private browsing mode and test the site again.

Hope this helps.

#5

The reason you probably could not replicate the issue is because I edited the headers. However, it seems now that the headers are properly set up for drop-down navigation, because the inline is getting cut off: https://prnt.sc/j460kn. No matter how I edit the header, it doesn’t want to display the dropdown in landscape iPad mode.

Please assist,
J

#6

Hey @weatherstone,

The iPad landscape’s width falls under the laptop screen size.

You will need to hide your inline nav in that view and show the nav collapsed.

Thanks.

#7

Good evening,

When I go to (Header) > Navigation Line Two (Bar) > Menu (Container) > Navigation Inline (Menu Element) > Customize to see the breakpoints and view my screen from the 980 px - 1199 px view I can see the navigation perfectly fine:

Why would I need to display the collapsed navigation? I would prefer to have the menu across the header on most laptops. Is there an alternative solution to make this work? One that could target small iPads, but not laptops?

Thank you,
J

#8

Hey There,

iPad’s resolution is 768x1024. The latest ones has bigger displays. I would recommend that you add a my-custom class or id to your menu and we can use a custom a custom css to target smaller screens. Something like this code can be added in the custom css

@media(max-width: 1100px) {
   #my-custom-1,
   .my-custom-1 {
     display: block;
  }

   #my-custom-2,
   .my-custom-2 {
     display: none;
  }
}

Hope this helps.

#9

Hello,

I implemented your code but am not sure where exactly to enter the class/id: https://prnt.sc/j596x0. I tried adding it in a number of locations but nothing seemed to be affected. Could you clarify where exactly I should insert the class/id?

Thank you,
J

#10

Hello There,

Please click any element and find the “Customize” tab. This is where you can insert the ID or class.

Hope this helps.

#11

Good morning,

I must not have been clear in my previous post. I am familiar with the “Customize” section, but perhaps the code is not working? I tried inserting it in the class section of multiple containers, all to no avail: https://prnt.sc/j5yup7.

The header menu is still not displaying correctly on laptops and iPads.

Thank you,
J

#12

Hi there,

Please note that mobile devices can even surpass desktop or laptop resolutions now. Hence, it’s more tricky since iPad is in the same range of a laptop. Adding a keyboard and it will become a laptop, and laptop with removable keyboard can become a tablet.

If you wish to display it across in the laptop, keep in mind that it will have the same effect on tablet. And making it collapse on tablet will make it collapse on laptop too.

My final question, which do you prefer? Display mobile items on tablet and laptop? Or display desktop items on tablet and laptop?

I also checked and I don’t see it added to your class input. Please add my-custom-1 to inline menu’s class, then my-custom-2 to mobile menu’s class. And please change that CSS to this,

@media(max-width: 1100px) and (min-width: 980px) {
   #my-custom-1,
   .my-custom-1 {
     display: block !important;
  }

   #my-custom-2,
   .my-custom-2 {
     display: none !important;
  }
}

Just to make sure lower break points aren’t affected.

Thanks!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.