Change the color and position of mobile menu

Support
#1

Can I change the color of the mobile menu and can I move it to the middle of the screen not the right side? Can I have no shadow ?
How can I do this ?

#2

Hi there,

Please add this code in X > Theme Options > CSS:

.masthead .x-navbar {
    text-align: center;
}

.masthead .x-btn-navbar {
    box-shadow: none;
}

Here are some related links for further reading:

Hope this helps.

#3

How about the color change of the mobile menu?

#4

Hi,

For mobile menu color, please add the code below

/* normal state */
.x-btn-navbar.collapsed {
    color: #b7b7b7;
    background-color: #fff;
}
/* hover state */
.x-btn-navbar.collapsed:hover {
    color: #919191;
    background-color: #f7f7f7;
}

Please change the color and background with the color that you like.

Thanks

#5

That code before posted - below. only took off the box shadow not center the mobile menu.

.masthead .x-navbar {
text-align: center;
}

.masthead .x-btn-navbar {
box-shadow: none;
}

#6

Centering the mobile menu would need that you set the Header Layout to Stacked. Go to Theme Options > Header > Logo and Navigation.

If you need inline layout in desktop and stacked on mobile, that is not possible. You will need to upgrade to Pro for that so you can create a custom header.

Please also note that the custom codes provided here in the forum are only guides. They’re meant to only help users get started extending the theme. Fixing custom codes and enhancing them are not covered in our product support. We might go above and beyond and point users to the right direction sometimes like we did here but that will not always be feasible.

We’re sorry if this wasn’t made clear from the start.

Thanks.

#7

Christian_y - If it was a obvious setting in the theme I wouldn’t have to ask, you spent more time writing me about how support is here to point me in the right direction only then answering the question. Seems that your answer was not really that great. Still did not help… or work still cant find out how to move the mobile menu to the center… The reason i sent the 2 links is because they are booth theme license for X theme.

#8

Hi @rotation,

Sorry for the confusion, I assume you’re referring to mobile menu icon alignment and not menu item’s text alignment. Any alignment will not work since it has float styling. Instead, please add this CSS

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
    float: none !important;
    clear: both !important;
    width: 51px;
    margin: 0 auto;
}
}

Thanks!

#9

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