Docs

[cleokerkhof]

Hi guys,

I created a website that looks perfect on desktop, now, my next challenge is making it mobile. You made it easy to do so with the cornerstone menu, thank you for that.

One of the things I did is installing the Mobi plugin, so I can make a beautiful mobole menu. Therefor I need the original desktop menu to disappear when you go mobile.

Also I do not want the square block in the upper right corner, never ever. How can I disable this permanently?

I found several CSS codes in different threads, but they all don’t work for me. Hope you guys can help me out on this.

Thanks in advance!

[cleokerkhof]

This reply has been marked as private.

[cleokerkhof]

I’m sorry, I forgot to add my website:
http://www.fadeblank.com

[Joao]

Hi There

Upon Checking your website I cant see the mobile menu,

Please clean your cache and test it again.

Let us know how it goes

Joao

[cleokerkhof]

Hi Jaoa,

I’ve added a screenshot of how it looks on my side.
Also on mobile I get this big menu block, the little black square button and the mobi menu at the bottom.
I just want to see the plugin which you see on the bottom of the screen when you go mobile.

Cleo

[Rad]

Hi there,

Please re-upload your image with the smaller size. Or perhaps a video recording for more detailed procedure on how we could reproduce your issue.

Thanks!

[cleokerkhof]

Sorry, too big file:
here you go!

[cleokerkhof]

Okay, fail after fail, I’m sorry:

[Paul R]

Hi Cleo,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.x-nav-wrap.mobile.collapse.in, 
.masthead-inline .x-btn-navbar  {
    display: none !important;
}
}

Hope that helps.

[cleokerkhof]

I filled it in in Customize> Custom> Custom Code.
That doesn’t work.
Where can i find Edit Global CSS?

Sorry for not being familiar with how the CSS coding system works.
And thanks for your help.

[Joao]

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.

[cleokerkhof]

This reply has been marked as private.

[Friech]

Hi There,

Place your code on Customizer > Custom > Custom Code (the first one is for CSS and the second field is for JavaScripts). Same with the Edit Global CSS and Edit Global JS but that is on the latest version of x.

Please look for this block on your Custom Code CSS area.

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
	box-shadow: none;

And add the missing closing bracket [}]. Else any custom CSS we add will not work.

After that add this custom CSS

@media (max-width:  979px) {
	.x-navbar-wrap {
		display: none;
	}
}

And please provide us screenshot of what you’re referring to as the little black square button, I am not seeing it on my end.

Thanks.

[cleokerkhof]

Thanks maestro!
You made it look great.
Worked perfectly.

For the people that are as experienced as me:
Put your CSS coding in the right order.
When I put my menu CSS information underneath it all it didn’t work.
(Correct me if I’m wrong of course)

Thanks again!
You guys helped me out with every little struggle I’ve gotten so far!

x

[Joao]

Hi There

Just to your knowledge, it is very likely you have some broken CSS code on your code, please review it and try to find a missing } or ;

The CSS at the bottom is the one which will always have priority, but of course, if there is some broken code above it might not work,

We are glad we managed to help 🙂

Joao

[Author]

Posts