GWT-Bootstrap: Two responsive navbars conflicting

Question

I'm doing a project in GWT and want to use twitter bootstrap for the layout. So I'm now using the gwt-bootstrap 2.2.1.0 library. I want to have two responsive navbars, one as header and one as footer.

When I shrink the screen and the buttons collapse into one. And I click on it I want that only that navbar expands. But they both expand.

I tried this first with HTML, CSS and JavaScript and this worked. I had to alter the JavaScript and give the navbars an id, so the JavaScript knew which one to expand. Also here is the JavaScript question from someone else: Two Responsive Nav bar in Bootsrap Page Conflicts

My question is how can I do that with gwt-bootstrap.

Header.ui.xml

<g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="TOP">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

Footer.ui.xml

 <g:HTMLPanel>
            <g:FlowPanel>
                <b:ResponsiveNavbar position="BOTTOM">
                    <b:Nav alignment="RIGHT" ui:field="buttons">
                    </b:Nav>
                </b:ResponsiveNavbar>
            </g:FlowPanel>
        </g:HTMLPanel>

Answer 1

Since no one can answer the question, I kept searching and trying for an answer and finally found one, so I wanted to share it with others who could have the same problem.

/** Set the collapse button to the right target. */

//Set the right id to the header/footer.
buttons.getParent().getElement().setId("header");

//You have to go up a few tiers in the DOM.
Element ep = buttons.getParent().getElement().getParentElement();
Element ec = buttons.getParent().getElement().getParentElement().getFirstChildElement();

//Change the data-target attribute to your id.
ec.setAttribute("data-target", "#header");