Page 1 of 1
sticky menu overlaps hamburger menu when on phone
Posted: 08 Aug 2018, 14:32
by smore
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 ?
Re: sticky menu overlaps hamburger menu when on phone
Posted: 09 Aug 2018, 19:32
by huseyinT
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,
Re: sticky menu overlaps hamburger menu when on phone
Posted: 10 Aug 2018, 16:30
by smore
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">
Re: sticky menu overlaps hamburger menu when on phone
Posted: 12 Aug 2018, 11:05
by huseyinT
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.
Re: sticky menu overlaps hamburger menu when on phone
Posted: 13 Aug 2018, 09:48
by mert.sincan
@huseyinT, please scroll to the bottom of page. Does it work for you?
Re: sticky menu overlaps hamburger menu when on phone
Posted: 13 Aug 2018, 11:15
by huseyinT
@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>
Re: sticky menu overlaps hamburger menu when on phone
Posted: 13 Aug 2018, 14:23
by smore
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>
Re: sticky menu overlaps hamburger menu when on phone
Posted: 13 Aug 2018, 21:25
by huseyinT
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.