WordPress.org

Ready to get started?Download WordPress

Forums

Responsive Select Menu
Problem with Search Bar in Main Navigation (7 posts)

  1. WLT-Jen
    Member
    Posted 1 year ago #

    I've just installed the Responsive Select Menu plugin on our website http://puterbaughfestival.org/.

    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.

    http://wordpress.org/extend/plugins/responsive-select-menu/

  2. fredthesam
    Member
    Posted 1 year ago #

    Any luck with this? I am having the same issue, using Genesis, Agency child theme and this plugin.

  3. WLT-Jen
    Member
    Posted 1 year ago #

    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.

  4. brettbum
    Member
    Posted 1 year ago #

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

  5. brettbum
    Member
    Posted 1 year ago #

    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="http://vivmag.com">Home</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43251"><a href="https://vivmag.com/subscribe/">Subscribe</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42445"><a href="http://vivmag.com/wp-login.php">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="http://vivmag.com/issues/">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="http://vivmag.com/category/vivsays/">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="http://vivmag.com/vivmoments/">VIV Moments</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42510"><a href="http://vivmag.com/video/">Videos</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42515"><a href="http://vivmag.com/giveaways/">Giveaways</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42542"><a href="http://vivmag.com/playlists/">Playlists</a></li>
    <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2514"><a href="http://vivmag.com/category/inthenews/">In The News</a></li>
    <li class="right search">
    		<form method="get" class="searchform" action="http://vivmag.com/">
    
    			<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="">
    		</form>
    	</li></ul>
    
    <select class="responsiveMenuSelect"><option value="">⇒ Navigate</option><option id="menu-item-39877" value="http://vivmag.com" selected="selected">Home</option>
    <option id="menu-item-43251" value="http://vivmag.com/subscribe/">Subscribe</option>
    <option id="menu-item-42445" value="http://vivmag.com/wp-login.php">Sign In!</option>
    <option id="menu-item-2275" value="http://vivmag.com/issues/">This Issue</option>
    <option id="menu-item-3496" value="http://vivmag.com/category/vivsays/">Blog</option>
    <option id="menu-item-42422" value="http://vivmag.com/vivmoments/">VIV Moments</option>
    <option id="menu-item-42510" value="http://vivmag.com/video/">Videos</option>
    <option id="menu-item-42515" value="http://vivmag.com/giveaways/">Giveaways</option>
    <option id="menu-item-42542" value="http://vivmag.com/playlists/">Playlists</option>
    <option id="menu-item-2514" value="http://vivmag.com/category/inthenews/">In The News</option>
    </select>
    
    <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="">
    
    	</div>
  6. sevenspark
    Member
    Plugin Author

    Posted 11 months ago #

    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.

  7. paulluxford
    Member
    Posted 6 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic