But in mobile version , in the top bar when i click on top menu button is not working. Welcome user message is overlapping with topmenu-button icon
My topbar template code is as below
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<!-- TOPBAR -->
<div id="layout-topbar">
<!-- LOGO -->
<a id="logo"> <h:outputText value="SIS"
styleClass="Fs25 Gold FontBold" />
</a>
<!-- MENUBUTTON -->
<a id="menu-button"> <i class="icon-chevron-down"></i>
</a>
[color=#FF8000][b]<h:outputText
value="Welcome user message"
styleClass="Fs20 Fright Red PosAbsolute" />[/b][/color]
<!-- TOPBAR LINKS -->
<a id="topmenu-button"> <i class="icon-list2"></i>
</a>
<h:form>
<ul id="topbar-menu">
<li><h:commandLink value="#{msgs.changePassword}"
action="#{userBean.changePassword}" /></li>
<li><h:outputLink
value="#{request.contextPath}/j_spring_security_logout">#{msgs.logout}</h:outputLink></li>
<li><p:commandLink onclick="PF('aboutdialog').show();"
id="sisversion" title="SIS #{sisConfigurationBean.versionInfo}"
value="#{msgs.about}" rendered="false">
</p:commandLink></li>
</ul>
</h:form>
<!-- MENU COVER -->
<div id="layout-menu-cover">
<ui:include src="layoutmenu.xhtml" />
</div>
</div>
<h:form>
<!-- TOPMENU -->
<ul id="top-menu">
<li><p:commandLink value="#{msgs.about}"
action="#{leftMenuBean.about}" ajax="false" /></li>
<li><p:commandLink value="#{msgs.tutorials}"
action="#{leftMenuBean.tutorials}" ajax="false" /></li>
<li><p:commandLink value="#{msgs.feedback}"
action="#{leftMenuBean.feedback}" ajax="false" /></li>
</ul>
</h:form>
</ui:composition>