sticky menu overlaps hamburger menu when on phone

Post Reply
smore
Posts: 13
Joined: 24 Mar 2015, 22:13

08 Aug 2018, 14:32

When the layout is utilized on a phone, and a sticky menu is used ( https://www.primefaces.org/showcase/ui/ ... icky.xhtml ) then scroll down, the menu overlaps the menu button.

Is there a way to get the sticky menu to stick below the topbar ?

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

09 Aug 2018, 19:32

Hi,

I tried your said. I don't see any issue about menu overlaps .

This is my mobile screenshot :
https://ibb.co/ht3j39


Could you share your sample code and screenshot or video?

Greetings,

smore
Posts: 13
Joined: 24 Mar 2015, 22:13

10 Aug 2018, 16:30

Here is the screen shot: https://ibb.co/cyc0BU

Inside of paradise-1.0.3/sample.xhtml

I added:
<ui:define name="content">
<h:form>
<p:toolbar id="tb">
<f:facet name="left">
<p:commandButton type="button" value="New" icon="ui-icon-document" />
<p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>
</f:facet>
<f:facet name="right">
<p:commandButton type="button" title="Save" icon="ui-icon-disk"/>
<p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>
<p:commandButton type="button" title="Print" icon="ui-icon-print"/>
</f:facet>
</p:toolbar>

<div style="height:200px"></div>

<p:sticky target="tb" />

<div class="ui-fluid">
<div class="ui-g">
<div class="ui-g-12">
<div class="card card-w-title">

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

12 Aug 2018, 11:05

I tested your code with paradise-1.0.3.

Screen :
https://ibb.co/cEsZap

What is your PF version? I tested with PF 6.2.

And Which are you using the browser and version?
But I tested chrome, firefox and internet explorer.

User avatar
aragorn
Posts: 3283
Joined: 29 Jun 2013, 12:38

13 Aug 2018, 09:48

@huseyinT, please scroll to the bottom of page. Does it work for you?

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

13 Aug 2018, 11:15

@smore,

you could add this code in the sample.xhtml:

Code: Select all

<style type="text/css">
            @media (max-width: 960px) {
            .ui-sticky {
                top: 105px !important;
	            }
            }
        </style>

smore
Posts: 13
Joined: 24 Mar 2015, 22:13

13 Aug 2018, 14:23

That seems to fix the issue. But I prefer it with a top of 55px.

Code: Select all

<style type="text/css">
            @media (max-width: 960px) {
            .ui-sticky {
                top: 55px !important;
                    }
            }
        </style>

huseyinT
Posts: 123
Joined: 27 Mar 2016, 13:05

13 Aug 2018, 21:25

https://ibb.co/gNGSgU

According to my test and screenshot, it looks good.

Is there any issue? Because I don't see, tell us, please.

Post Reply

Return to “Paradise - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests