Docs

[marcooos]

Hi, first of all I’ve been reading through the forum – thank you for your amazing support, great to see.

1. I’ve added some custom code I found on the forum to disable the “3 line menu button” on mobile:

@media (max-width: 979px) {
    .x-nav-wrap.mobile.collapse {
      display: block!important;
      height: 100%!important;
    }
    a.x-btn-navbar {
       display: none!important;
    }
}

.x-navbar .x-nav-wrap .x-nav > li > a {
    text-align:center;
}

I wanted to change it so that the mobile menu is only activated on devices displaying under 500px width. Changing “max-width” to anything lower in the code above seems to reactivate the “3 line menu button”.

2. Is it possible to disable the search box on the menu ONLY on mobile (under 500px width)?

3. Is it possible to remove the line and spacing under the logo when on mobile? (see image attached)

[marcooos]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your code to :

@media (max-width: 979px) and (min-width:500px) {
    .x-nav-wrap.mobile.collapse {
      display: block!important;
      height: 100%!important;
    }
    a.x-btn-navbar {
       display: none!important;
    }
}
@media (max-width:500px){
li.menu-item.x-menu-item.x-menu-item-search {
    display: none;
}
.x-logobar {
    border-bottom: none;
}
}

.x-navbar .x-nav-wrap .x-nav > li > a {
    text-align:center;
}

Hope it helps.

[marcooos]

Hi Christopher.

That seems to have solved problem number 1, but I think you missed number 2 & 3 on my original post?

[Paul R]

Hi Marcos,

I can see, it also solved problem 2.

Search no longer showing below 500px

http://screencast.com/t/2sMfKNCrpyA

For #3

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

@media (max-width: 979px) {
body .x-logobar {
   border:0;
}

body .x-navbar {
   box-shadow:none;
}
body .masthead-stacked .mobile .x-nav {
    margin-top: 0;
}
}

Hope that helps.

[marcooos]

Paul, you’re a legend, thank you.

[Rue Nel]

You’re most welcome!
We’re glad we were able to help you out.

[Author]

Posts