Help for viewing MegaMenu firstfaces

Posted on

Question :

Good colleagues, I’m having a problem with the MegaMenu component of primefaces I liked the components to be visible to the users but they are hidden behind the central region, so I would like to bring it forward. How can I do that? I tried to use an external css and call more unfortunately it did not work so I decided to use inline css also did not resolve. Below images


<?xmlversion="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


            style="font-size: 1.3em; margin: 0; margin-left: 2%; font-weight: 1.5; padding: 5px;"
        <p:menu style="border:none; width:95%;">

            <p:menuitem icon="ui-icon-check" value="Estoque de produtos"
                outcome="/pages/productos.xhtml" />
            <p:menuitem icon="ui-icon-person" value="Funcionários"
                outcome="/pages/funcionarios.xhtml" />
            <p:menuitem icon="ui-icon-tag" value="Departamentos"
                outcome="/pages/departamentos.xhtml" />


        <p:megaMenu orientation="#{MBIncludesBean.orientation}"
            <p:submenu label=" Consultar ações">
                <p:submenu label="Consultar Historiais">
                    <p:menuitem value="Historial de entradas"
                        outcome="/pages/entradaProductos.xhtml" />
                    <p:menuitem value="Historial de saídas"
                        outcome="/pages/saidaProductos.xhtml" />

                    <p:menuitem value="Historial de requisições"
                        outcome="/pages/requisicoes.xhtml" />
                    <p:menuitem value="Historial de produtos"
                        outcome="/pages/historialProducto.xhtml" />
                    <p:menuitem value="Historial de departamentos"
                        outcome="/pages/historialDepartamento.xhtml" />
                    <p:menuitem value="Historial de funcionários"
                        outcome="/pages/historialFuncionario.xhtml" />


CSS code

@charset "ISO-8859-1";

.ui-layout-west {
    z-index: 20 !important;
    overflow: visible !important;;

.ui-widget, .ui-widget .ui-widget {
    font-size: 95% !important;

.ui-layout-west .ui-layout-unit-content {
    overflow: visible !important;


Layout code

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title><ui:insert name="namePage">Layout do sistema</ui:insert></title>
    <h:outputStylesheet library="css" name="style.css"/>

<h:body style="background: #f2f1f1;">
    <p:growl id="msg" life="6000" />

        <p:layout fullPage="true" style="border:none;">

                <p:layoutUnit position="west" size="245" style="border:none;" >
                    <ui:insert name="menu" />


                <p:layoutUnit  size="60" position="north"  style="border:none; overflow:visible;">
                    <ui:insert name="cabecalho" />


                <p:layoutUnit position="center"  style="border:none;  ">
                    <ui:insert name="conteudo" />





Answer :

Ayrton as stated in the comment this is just a simple template to help you understand a html structure template that can solve your problem. It is basically done with position:relative in aside and position:absolute in section, so you can control z-index of menu and leave over content and without that scrollbar that it appears there, since aside does not have to have width defined

I tried to save on CSS to make it easier to understand, and I left the comments in the code to better understand the points.


html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: azure;
/* a barra lateral não tem largura definida e está com o z-index definito para sobrepor a section ao lado */
aside {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
/* a section sim tem largura definida em 75% da largura da tela e fica alinhada a direita pois tem um margin-left automático que empurra a section pra direita */
section {
  position: relative;
  height: 100%;
  width: 75%;
  margin-left: auto;
  background-color: silver;

/* CSS apenas para ativar o menu e facilitar a visualização, vc não precisa desse código CSS no seu modelo. */
label {
  user-select: none;
  cursor: pointer;
  display: inline-block;
  padding: 8px;
  border: 1px solid #000;
  background-color: #fff;
  transition: 500ms;
label:hover {
  background-color: limegreen;
  display: inline-block;
  background-color: red;
nav {
  display: none;
[type="checkbox"] {
  display: none;
#btn:checked + nav {
  display: block;
  <!-- o conteúdo da aside vai ser o seu menu e o restante das infor que precisa. -->
  <label for="btn">menu</label>
  <input type="checkbox" name="" id="btn">
      <li>item 01</li>
      <li>item 02</li>
      <li>item 03</li>
      <li>item 04</li>
      <li>item 05</li>
      <li>item 06</li>

<!-- aqui vem o conteúdo prencipal -->

Leave a Reply

Your email address will not be published. Required fields are marked *