Docs

[incommon]

Hello I have managed to use your css for establishing at what screen size the sidebar will disappear and go into full mobile mode. However there is a gap where the sidebar is still visible and the menubar floats on top of it. Basically menu bar goes into mobile mode, at the default size, but sidebar is still visible at the left because of my override css.

When you scroll down the page and the menu bar “locks” into place (just after the top bar disappears) it floats left and on top on sidebar.

See here:
http://build.fabacademy.ca/members/admin/
Screen shot Photos attached

I used this css to have the sidebar fall out when I want it to:

@media (min-width: 767px){
.x-sidebar {
position: fixed;
top: 0;
width: 245px;
height: 100%;
margin: 0;
border-top: 0;
z-index: 1020;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;

}
.x-sidebar .max.width{
margin-right: 0px !important;
right: 0px !important;
}
body.x-sidebar-content-active, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active{
padding-left: 245px;
}
}

If I change the z-index: to 1031 the sidebar floats on top of the menu bar and logo.

How do I get the menubar to move to mobile mode at the same time as the side bar falling out?

[Christopher]

Hi there,

Please update your code to :

@media (min-width: 767px){
.x-sidebar {
position: fixed;
top: 0;
width: 245px;
height: 100%;
margin: 0;
border-top: 0;
z-index: 1020;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;

}
.x-sidebar .max.width{
margin-right: 0px !important;
right: 0px !important;
}
body.x-sidebar-content-active, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active{
padding-left: 245px;
}

body.x-sidebar-content-active .x-widgetbar, body.x-sidebar-content-active .x-navbar-fixed-top, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active .x-widgetbar, body[class*=”page-template-template-blank”].x-sidebar-content-active.x-blank-template-sidebar-active .x-navbar-fixed-top {
left: 250px;
}
}`

Hope it helps.

[incommon]

Almost!

Ok so that does stop it from going over the sidebar (to the left) and seems to give a greater margin of responsiveness, however at a certain break point (resizing browser window) it slides the navbar to the right by the 250 pixels while the side bar is still up. see photo.

This seems to happen as the main content band switches to mobile mode (no fixed navbar) Is there a way to trigger main content switch to mobile (full scrollable) mode at the same time (size) as the sidebar drops out?

[incommon]

This reply has been marked as private.

[incommon]

Adding this css will lock the navbar in place without sliding either direction, but it partially disappears behind the wp-admin bar at top.

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed;
}
}

I will not be allowing front end users to see the wp-admin bar anyway, this is just an administrator issue that will not affect front end users if I hide that top bar from non-admin users. Adding “Hide Admin Bar From Non-admins” Plugin paired with the new ubermenu will allow locking of Mobile navbar and have responsiveness to the navmenu at the same time.

[incommon]

I would be fine with locking the navbar however, on a smaller smartphone (iPhone 4) screen the menubar collapses next to the logo.

Can I have the logo go a bit smaller to allow spacing for the menu and hamburger icon in line?

If it would stay all in on line, I will keep it locked on mobile. Actually looks fine on a larger iphone screen.

See photos.

[Paul R]

Hi,

In that case please replace your code with this.

@media (max-width: 979px) {
.x-navbar-fixed-top {
    position: fixed;
    z-index:999999;
}

.x-brand img {
    width: 125px;
}

}

You may change 125px to achieve your desired size for the logo.

Hope that helps.

[incommon]

Perfect thanks for the help! Looks great on all devices now.

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts