[Resolved] change when search on mobile triggers

[morriscountynj]

i changed when the mobile menu triggers (with your help), see this site for example:
http://morriscountynj.gov/surrogate/

but the in-bar search button on mobile doesn’t trigger until 768px. How can I change that?

[Tom]

Hi there,

Can you point me to the code I pointed you to in the first place?

It may need updating 🙂

[morriscountynj]

couple of snippets here: first is the mobile menu code, second is extra code i added to fix how the columns render (since i have it going mobile early, i needed the columns to spread out early too)

/* mobile menu */

@media (max-width: 1024px) {
.main-navigation .menu-toggle,
.main-navigation.toggled .main-nav>ul {
display: block;
}
button.menu-toggle {
background-color: transparent;
width: 100%;
border: 0;
}

button.menu-toggle:hover,
button.menu-toggle:active,
button.menu-toggle:focus {
background-color: transparent;
border: 0;
outline: 0;
}

.main-navigation ul li:hover > ul {
display: none;
}

.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
display: none;
}

.sub-menu.toggled-on,
.children.toggled-on {
display: block !important;
}

.main-navigation .main-nav ul li .dropdown-toggle {
display: block;
}

.main-navigation li a.dropdown-toggle {
position: absolute;
top: 0;
right: 0;
}

.main-navigation ul {
display: none;
}

.nav-float-right .main-navigation {
float: none;
margin-bottom:20px;
}

.navigation-search {
bottom: auto;
top: 0;
}

.menu-toggle li.search-item,
.menu-toggle li.search-item-disabled {
position: absolute;
right: 0;
top: 0;
z-index: 21;
list-style-type: none;
}

.menu-toggle li.search-item a,
.menu-toggle li.search-item-disabled a{
line-height: inherit;
color: inherit;
background-color: inherit;
}

.main-navigation .menu li.search-item {
display: none;
}

li.search-item a {
padding-left: 20px;
padding-right: 20px;
}

.menu-toggle {
text-align: center;
}

.nav-search-enabled .main-navigation .menu-toggle {
text-align: left;
}

.main-nav .sf-menu > li {
float: none;
clear: both;
}

.nav-aligned-right.nav-below-header .main-navigation .menu > li,
.nav-aligned-right.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-right.nav-above-header .main-navigation .menu > li,
.nav-aligned-right.nav-above-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li,
.nav-aligned-center.nav-above-header .main-navigation .menu > li,
.nav-aligned-center.nav-above-header .main-navigation .sf-menu > li {
display: block;
margin: 0;
text-align: left;
}

.main-navigation .main-nav ul ul {
position: relative;
top: 0;
left: 0;
width: 100%;
}

.main-navigation {
text-align:left;
}

.navigation-search,
.navigation-search input {
width: 100%;
max-width: 100%;
}

.sf-menu .menu-item-has-children > a:first-child,
.sf-menu .page_item_has_children > a:first-child {
padding-right: 1em;
}

.sf-menu .menu-item-has-children > a:first-child:after,
.sf-menu .page_item_has_children > a:first-child:after {
display: none;
}

.nav-search-enabled .main-navigation .menu-toggle {
text-align: center;font-size:16px;}
}

/* =set it so that on tablets you still spread out the columns to avoid overcrowding
——————————————————- */

@media (max-width: 1024px) and (min-width: 768px) {
.tablet-grid-50, .tablet-grid-75,.tablet-grid-60,.tablet-grid-80 {float:none;width:100%;}

.one-container.left-sidebar .site-main {margin-left:0;}
.one-container.both-sidebars .site-main {margin-left:0;}
.one-container .site-main {width:100%;}

.tablet-grid-25,.tablet-grid-20 {width:100%;}
.tablet-pull-80,.tablet-pull-60 {left:0}
.tablet-push-25,.tablet-push-20 {left:0;}
/* left: 25%; */
.inside-right-sidebar {margin: 0 60px 0 60px}

}

[Tom]

Try this updated code: https://gist.github.com/generatepress/c23aef2d05807c39bb32

Let me know 🙂

[morriscountynj]

that worked, thank you!

heads up that i’m a tad obsessed with this theme. i used it for most of our county websites!

[Tom]

That’s what I like to hear! Glad it worked 🙂

[Author]

Posts