Top menu is not correctly aligned on mobile devices

[pholding]

Hi

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" />
</a>

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

Paul

[mert.sincan]

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.