How to centre desktop menu?

Support
#1

Would like to centre menu (currently left). Can someone please advise how to achieve this?
Many thanks.

Site here.

#2

Hello @mbjarvie,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.x-navbar{
    margin: 0 auto;
    text-align: center;
}

.x-nav-wrap.desktop {
    margin: 0 auto;
    text-align: center;
    display: inline-block;
}

Thanks.

#3

Thanks for that. Centre looks great on desktop but now the desktop menu displays on top of the mobile “button” menu…

#4

Hi there,

Please update this code:

to

@media (min-width: 980px) {
    .x-nav-wrap.desktop {
        margin: 0 auto;
        text-align: center;
        display: inline-block;
    }
}

Hope this helps.

#5

Perfect! Thanks very much.
Another quick one: How can I add some top/bottom padding specific only to the menu in “mobile button” mode?

#6

Hello @mbjarvie,

Thanks for updating thread. :slight_smile:

Please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .x-btn-navbar.collapsed {
    margin-bottom: 20px;
    margin-top: 20px;
}
}

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.