Filippo Filippo - 1 month ago 6
CSS Question

Strange alignment of the menu from responsive to normal

sorry for the title...but I have an issue with the alignment of the main menu when the website come from responsive to pc view. (for example it happen when you rotate your tablet from portrait to landscape, or simply you enlarge your browser window from 600pixel wide to 1300px... ).

To understand what I mean just do this (just look at the main menu):


  • open my website: http://www.piedicosta.com/joomla3/en

  • reduce browser windows at 500/600 pixel wide, to let the css transform the website in responsive.

  • open a submenu by clicking on the down arrow at right. Leave the sub menu open.

  • now enlarge the browser window to let the css transform the website in pc view.



Can you see that the main menu, now float at left?

If you refresh the page, than the main menu comes at center.

This issue happen only if you leave (from responsive view) a submenu item open. If you don't touch the menu in responsive view nothing happen and everything seems working fine.

Is there a simple reason of this issue?

Thank you for your help!

Answer

Your problem lies in your responsive.css?reload file.

On line 25:

#tm:checked + .main-menu {
/*display: inline-block;*/
display: block;<-- this guy is the problem-->
}

Change it to:

#tm:checked + .main-menu {
 display: inline-block; 
}

You can fix for your next problem via CSS media queries. Now to be honest I am not sure which file you should edit, i think it should be responsive.css?reload. Note: Add CSS media code after

@media (min-width: 1024px) {
   ul.main-menu li a {
   padding: 27px 10px 10px;
   }
}
@media (min-width: 1300px) {
    ul.main-menu li a {
    padding: 13px 17px 10px;
   }
}
/*Add code below HERE!!*/

The code should look like this:

/*
* - Mobile
*----------------------------------------------------------------------------
*/
@media only screen and (max-width: 800px) {/* Serve big tablet layout and tablet menu kindle's and hi-res devices ( portrait ) */
    #tm:checked + .main-menu {
    display: inline-block;
    min-width: 300px;
    }
     #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}
@media only screen and (max-width: 768px) {/* Tablets layout*/
    #tm:checked + .main-menu {
    display: inline-block;
    min-width: 300px;
    }
    #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}
@media only screen and (max-width: 400px) {/* Small mobile devices */
 #tm:checked + .main-menu {
    display: inline-block;
    min-width: 300px;
    }
    #toggle-menu .drop-icon, #menu li label.drop-icon {
    left: 0;
    position: absolute;
    top: 0;
    }
}
Comments