Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] change when search on mobile triggers

Home Forums Support change when search on mobile triggers

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #169875
    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?

    #170075
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    It may need updating 🙂

    #170147
    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}

    }

    #170269
    Tom
    Lead Developer
    Lead Developer
    #170406
    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!

    #170508
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.