Docs

[luisramosbcn]

Hi,

I have two questions regarding mobile view (and in this page for example: http://institutodeemprendedores.org/tutoriales/):

– On mobile: ubermenu is at the bottom. I haven’t found a setting to place it above content (below header). How can I set that?

– On mobile: the logo I use is too wide and pushes the main menu to a 2nd line. How can we adjust the menu only on mobile to be a little smaller so the menu and the logo live together in perfect harmony in the same line?

Thanks in advance.
Luis

[Rupok]

Hi Luis,

Thanks for writing in!

#1. Looks like you have placed the menu on left. What you are trying to achieve?

#2. You can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.x-brand.img {
	width: 225px;
}
}

Hope this helps.

[luisramosbcn]

Hi Rupok,

the menu is on the left, on the sidebar on the left. But that’s on desktop.

My issue is on mobile.

On mobile (I’ve tested in my android phone), the sidebar menu appears at the end of the page.

I’d like that sidebar menu to appear, ONLY on mobile, after the main page header, and before the content itself (and in all the pages that menu is set, of course).

Is that achievable?

Thx

[Rad]

Hi there,

It’s hard to identify it on just the menu since there is no selector. Let’s do this instead

1. Please edit your pages that you wish to implement this and add mobile_sidebar to Body Class(es) input under Page/Post setting’s section. Do this for alll the pages that have that menu.

2. Then add this CSS to Admin > Appearance > Customizer > Custom > CSS

.mobile_sidebar .x-sidebar {
display: none;
}
.mobile_sidebar .x-main {
float: none;
width: 100%;
margin: 0;
}

@media ( max-width: 979px ) {

.mobile_sidebar .x-sidebar {
display: block;
}

}

And add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery('.mobile_sidebar .x-sidebar').insertBefore('.x-main');

Hope this helps.

[Author]

Posts