Docs

[Transfac]

I want to style the mobile menu for my website (I have attached a screenshot of what I am going for). How would I go about doing that?

[Christian]

Hey there,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Transfac]

Sure thing. dev.transfac.com

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

@media only screen and (max-width: 900px) {
.x-navbar .x-nav-wrap .x-nav>li>a {
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
    color: #fff !important;
    font-weight: bold;
}

.x-navbar .mobile .x-nav {
    background-color: #01aef0;
}

i.x-icon-bars {
    color: #01aef0 !important;
}

}

Let us know how it goes.

Thanks.

[Transfac]

That looks good! Would it be possible to add a button and contact number like the attached image from the initial post shows?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Transfac]

This reply has been marked as private.

[Joao]

Hi There,

Please add to your Menu The texts and images as on your top bar.

Please turn off all the cache plugins you have installed.

Let us know when that is ready in order that we can help you style it, we will hide those elements from your navbar via media query and style the second item as a button.

Thanks

Joao

[Transfac]

I am not sure I know what you mean when you say, “Please add to your Menu The texts and images as on your top bar.”

[Joao]

Hi There,

Go to Appereance > Menu and add Custom Links with the same content as on your topbar.

That is the only way to put content inside your menu. Once you have done that, please let us know and we will help you hide on standard menu and give the style you want.

Hope that is clear now,

Thanks

Joao

[Transfac]

I understand now. That has been taken care of and I have deactivated the cache plugins. I created a new menu to be used for mobile, simply titled “Mobile Menu.” Thanks for your help

[Nabeel A]

Glad we could help.

Cheers!

[Transfac]

Were you able to style the menu? I don’t see any changes.

[Joao]

Hi There,

Upon Checking your website your menu items are not appearing on the front end.

To check what is causing the problem, You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes,

Joao

[Transfac]

What do you mean? Everything seems to be working fine. I would just like to create a styled mobile menu like the one from the image attached above.

[Author]

Posts