Shapely primary menu location

Hi Colorlib,

With the menu of Shapely theme i have a problem. When i use computers with lower resolutions, but still not that low (macbook), the menu levels are not completely visible. The menu is like 4 levels deep, but the last level falls out of my screen and thus not selectable.

Can the menu allign in the middle or more to the left? Or can the menu levels just stay within the browser screen and not fall out. I can imagine it then has to overlap or something.

Hopefully someone can help me with this.


Hi there

Hope you are having a good day and thank you for your question
Martijn please provide a link to the page and screenshot
Colorlib Support Team


Yes, screen is attached. Here you see the latest menu item falling outside my screen. My screen is not bigger than this (resolution wise). I use a macbook. The menu item is just not clickable anymore.

Hopefully you can help me with this.

Kind regards,

Here is also a linkā€¦ See screenshot with the TEST menu level.

Bigger resolutions is no problem (imac), but with my 13 inch macbook it just falls off.
I can imagine most people user 1366 resolution? That would be a problem at the moment.

Hello there,

Please try this CSS code to reduce the font size:

.main-navigation .menu > li > ul li a {
    font-size: 11px;

Best Regards,

Yes this is possible. Although i would of liked it to be more bigger for readability reasons.
There is no other option to accomplish this? For example center menu more to the left?


Please try adding this CSS, it will space the items evenly in the center:

#site-navigation .container > .flex-row {
    align-items: center;
    justify-content: space-evenly;

Let me know if that helps.

Best Regards,

Yesss! Thanks very much for your help. This is what i needed, really appreciated.

Kind regards,

Great :slight_smile:

I will close this case now, Feel free to contact us again if you have other questions Thanks!