Essence Pro navigation & mobile issues

[Terri]

Hi,
I've been looking through posts page by page, since I see no way to search this forum. Can anyone tell me how to get in touch with the Essence Pro developer? I need a little help getting the navigation menu to work on smartphones. I posted this on the Design Tip forum, but no replies; thus far.

I'm using CSS only to create the sticky menu for the Essence Pro theme. It works on both desktop and mobile, except when viewing on a smartphone in landscape mode; it works when viewing in portrait mode. When viewing in landscape mode, the menu will open, however, half of the navigation links are cut off and there's no way to scroll down the page.

Here's the CSS I'm using:
.site-header {
position: fixed;
width: 100%;
z-index: 99999;
}

I can't figure out why it works on tablets, but not on smartphones -- and only when viewing in landscape mode.

What am I missing? Is there something I need to change in the js css?

Any help will be greatly appreciated!

Terri

[Brad Dalton]

You can use CSS for media queries to target landscape. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation#CSS

How about trying position: sticky like this:

.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
}

Also, please close this

---

Tutorials for StudioPress Themes.

[Terri]

Hi Brad,
Unfortunately that didn't work.

How do I close that other post?

[Terri]

I've solved the problem (finally!) by adding max-height and overflow-y.

Edit: Spoke to soon. In a way, that solved the main problem; it created a new problem. On desktop version, the header sticks but the menu does not.

[kumpulanremaja]

i dont undestand this word

[kumpulanremaja]

i think

[Terri]

How do I close out posts and stop receiving email notifications?

[Author]

Posts