Support » Plugin: Responsive Select Menu » Problem with Search Bar in Main Navigation

  • I’ve just installed the Responsive Select Menu plugin on our website

    I have a custom functions.php filter to put the Search bar within the main navigation, but now the search bar shows up twice on the website as the Responsive Select Menu plugin is picking it up as part of the menu. This would be fine if the second search bar remained hidden with the mobile navigation, but instead the second search bar is visible at all times. On the website, it is the second one appearing just below the main menu.

    I need the second search bar to behave with the rest of the mobile menu, and only appear when the navigation converts to the mobile version.

    Thanks for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Any luck with this? I am having the same issue, using Genesis, Agency child theme and this plugin.

    No luck for me. I ended up just removing this plugin because I couldn’t get it to ignore or show/hide the search bar at the appropriate times. Is Genesis a responsive theme? If it is, it may already have a built in tiny nav bar that knows to appear when the browser window is a certain width. I’m using Responsive and running my own custom child theme and the built in mobile nav works great. You can see it on a regular computer just by resizing the browser window too.

    Experiencing the same issue with the Magazine Theme from StudioPress (Genesis too).

    Here’s the html generated. Note the responsiveSelect <select> tag does not include the input .s search box the second time around….

    <div class="wrap"><ul id="menu-top-1" class="menu menu-primary superfish responsiveSelectFullMenu sf-js-enabled"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-39877"><a href="">Home</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43251"><a href="">Subscribe</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42445"><a href="">Sign In!</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2275"><a title="See the Current Issue" href="">This Issue</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-3496"><a title="The Viv Says Blog" href="">Blog</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42422"><a title="Submit your VIV Moments" href="">VIV Moments</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42510"><a href="">Videos</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42515"><a href="">Giveaways</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42542"><a href="">Playlists</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2514"><a href="">In The News</a></li>
    <li class="right search">
    		<form method="get" class="searchform" action="">
    			<input type="text" value="Enter Search Here" name="s" class="s" onfocus="if (this.value == 'Enter Search Here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Search Here';}">
    			<input type="submit" class="searchsubmit" value="">
    <select class="responsiveMenuSelect"><option value="">⇒ Navigate</option><option id="menu-item-39877" value="" selected="selected">Home</option>
    <option id="menu-item-43251" value="">Subscribe</option>
    <option id="menu-item-42445" value="">Sign In!</option>
    <option id="menu-item-2275" value="">This Issue</option>
    <option id="menu-item-3496" value="">Blog</option>
    <option id="menu-item-42422" value="">VIV Moments</option>
    <option id="menu-item-42510" value="">Videos</option>
    <option id="menu-item-42515" value="">Giveaways</option>
    <option id="menu-item-42542" value="">Playlists</option>
    <option id="menu-item-2514" value="">In The News</option>
    <input type="text" value="Enter Search Here" name="s" class="s" onfocus="if (this.value == 'Enter Search Here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Search Here';}">
    			<input type="submit" class="searchsubmit" value="">
    Plugin Author sevenspark


    The issue is the way the functions.php filter adds the search bar – you need to write the code so that it only adds it to the main menu. I’d suggest just adding a check to make sure the function only runs once; you could even just remove the filter after the first execution.

    Alternatively, simply write a media query to hide the second search bar above a certain viewport width.

    Hi sevenspark,
    I am having the issue with the search bar displaying twice as well. I am a newbie at this and would like to know how to write the code or make a check in the functions.php file to make the second one disappear. Also how to add the media query. I appreciate your help with this.

    I am using a Genesis child theme.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problem with Search Bar in Main Navigation’ is closed to new replies.