0

I got a dynamic menu on my website, which comes trough options previously update on the database. Inside each options, there's a list of sub-options.

When I click in a sub-option, it should bring the stores for that sub-option from the database. So far it's working perfectly, the issue happens when I reduce the screen size, and it generates a side menu, that hidden menu, which expands when you click on it. In this way, it just stop working, but if I turn back the screen size, the menu starts working again. It only doesn't work when it's on a small screen.

You can check it online at www.portalbid.com (select one option on the main page and the menu will show up)

Follow the code:

<nav id="nav">
                <ul id="menuvert">

                    <ui:repeat value="#{categoriaBean.todasCategorias}" var="categoria" varStatus="status">
                        <li>
                            <p:commandLink>
                                <h:outputText value="#{categoria.titulo}"/>
                            </p:commandLink>

                            <ul>

                                <ui:repeat value="#{categoria.subCategorias}" var="sub">

                                    <li>
                                        <p:commandLink styleClass="featured"
                                                       action="#{lojistaBean.redirSubLojas}">
                                            <f:setPropertyActionListener value="#{sub}"
                                                                         target="#{lojistaBean.subCategoriaSelecionada}"/>
                                            <h:outputText value="#{sub.descricao}"/>
                                        </p:commandLink>
                                    </li>

                                </ui:repeat>
                            </ul>

                        </li>


                    </ui:repeat>

                </ul>

            </nav>

I'm using JSF 2.2.13 and PrimeFaces 6.0 Anyone can help me?

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Jilles Ragonha
  • 1

1 Answers1

0

I see in your produtos.css that you are using a media query

@media screen and (max-width: 980px) {

and due to this, your menu is shrinked to a bootstrap-like shrinked menu with side bar.

if you change the max-width to something smaller e.g. 180, then your menu will come back to its "original" state.

Apostolos
  • 10,033
  • 5
  • 24
  • 39
  • Yeh, but then i don't have this menu anymore... and i want to keep it, just dont understand why the menu dosen't work when its shrinked with side bar.... – Jilles Ragonha Oct 07 '16 at 13:01
  • you will have it but in case of very small screens. you define the media query width. what do you mean that it doesnt work? it lists me the links as sidebar, so it is working as expected. that's how this menu works actually – Apostolos Oct 07 '16 at 13:05
  • my problem is with the link, when the menu is shrinked, its stop working, you can click, and nothing happens, but when the menu is on normal size, the link works fine – Jilles Ragonha Oct 07 '16 at 13:59