Top menu is not correctly aligned on mobile devices

Posts: 27
Joined: 25 Feb 2014, 21:19

01 Sep 2015, 22:56


I'm editing the topbar.xhtml file that is supplied with the Modena layout for use in my application and have found that if the Modena logo is removed then the top menu is not correctly aligned when displayed on a mobile device.

For example if I remove the following code from the topbar.xhtml file then the menu is aligned as shown in the screenshot below.

Code: Select all

<a href="/modena/dashboard.xhtml" id="logo">
    <h:graphicImage name="images/logo.svg" styleClass="Fleft" library="modena-layout" />

However I would expect the menu to be aligned as shown in the screenshot below.

Is there something I can change so that the top menu is correctly aligned or is this something that can be changed in the next version of the Modena layout so that the alignment of the menu isn't dependent upon the logo?

Kind Regards


Posts: 3841
Joined: 29 Jun 2013, 12:38

02 Sep 2015, 08:54

For now, I think you can override the media queries or try with this code;

in modena-layout.less

Code: Select all

@media (min-width: 320px) and (max-width: 960px){
   #top-menu.showmenu {
       margin-top: 57px !important;
We will add a similar fix for next Modena release.


Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest