Setting toggle always on for Search

  • Resolved richdal

    (@richdal)


    8 years, 9 months ago

    The Search links look like they’re setup to toggle the display on and off. I’d rather leave it toggled on so it’s always visible. The form information looks like this…

    <div class="ab-item ab-empty-item" tabindex="-1">
<form action="https://....." method="get" id="adminbarsearch">
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<input type="submit" class="adminbar-button" value="Search"/>
</form>
</div>

    I already had a custom CSS file loading up from the style’s functions.php file. I tried setting the different form related tags to “display:block” in the custom CSS file but it’s having no affect.

    #adminbarsearch { display:block; }
#adminbar-search { display:block; }

    Can this be adjusted with CSS alone or am I starting in the wrong place?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi, can you provide a link to the site? Thanks!

    Hi richdal,

    What do you mean by toggling the display on and off? Could you also provide a link to your site so we can see the issue?

    Thread Starter richdal

    (@richdal)

    For the toggle I meant having to click the magnifying glass icon to show or hide the search field and its submit button. Trying to remove the effect to it’s always displaying. That way it reduces the steps for the user and easier to locate.

    I need to login to the site to access so I wouldn’t have a public access page to share. I highlighted the changes I made from the functions.php file and the CSS file it loads, but can include other parts of the code if needed.

    Thread Starter richdal

    (@richdal)

    Was able to figure out a way to keep the search field expanded so the icon didn’t have to clicked to open it. Looked like there was jQuery code being used to manage the effect, so I added this to my theme’s functions.php file

    function ToggleSearchOn() { ?>
<script type="text/javascript">
jQuery( document ).ready( function($) {
        $( ".search-toggle" ).parents( ".menu-search" ).toggleClass( "search-toggle-active" );
</script>
<?php
}
add_action( 'wp_footer', 'ToggleSearchOn' );
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Setting toggle always on for Search’ is closed to new replies.