Topic: Search bar in navbar | Themeco Community

Author

Posts

January 25, 2015 at 12:37 am #191021

Participant

Rather than have the search icon I would prefer to have a search bar in the navbar (to the right of the menu categories) where customers could enter their search phrase directly rather than use the native method. I tried following the directions in the post below without any luck:

https://theme.co/x/member/forums/topic/how-to-add-search-in-menu-bar/#post-31512

Any suggestions? Thanks!

January 25, 2015 at 10:09 am #191173

mutzy94

Participant

Almost forgot, here is my website: http://www.expeditiondocs.com

January 26, 2015 at 3:17 am #191559

Christopher

Moderator

Hi there,

Create _navbar.php file under YOUR CHILD THEME -> framework -> views -> global and add this code in there:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <div class="custom-search">
    <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

        <label class="visually-hidden" for="s"></label>
        <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
        <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

    </form>
</div>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <div class="custom-search">
    <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

        <label class="visually-hidden" for="s"></label>
        <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
        <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

    </form>
</div>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Please add the following CSS under Customize -> Custom -> CSS :

.custom-search{
color: #0157A8 !important;
float: right !important;
font-size: 18px !important;
margin: 20px 5px 0 10px !important;
width:20%;
}

Hope it helps.

January 26, 2015 at 2:14 pm #192069

AnBeeToSee

Participant

this is not help.

January 26, 2015 at 3:28 pm #192128

AnBeeToSee

Participant

can hope for an answer?

January 27, 2015 at 12:47 am #192406

Christian

Moderator

Hey AnBee,

Please open your issue in a separate thread and give us your URL and WordPress admin there so we could investigate maybe your setup is different.

Thanks.

January 27, 2015 at 1:11 am #192429

mutzy94

Participant

I did what as you said but the search bar is too low in the navbar similar to what AnBeeToS experienced. I want it on the same level as the menu categories.

Also, when I search for something there is a huge gap between the navbar and the first search result. My childtheme navbar.php info is below for reference

Thanks, Josh

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
        <!-- .custom-social-icons -->
        <div class="logobar-social">
          <a href="http://www.facebook.com/expeditiondocs">
            <img alt="Facebook" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/facebook.png" width="35" height="35" />
          </a>
          <a href="http://www.twitter.com/expeditiondocs">
            <img alt="Twitter" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/twitter.png" width="35" height="35" />
          </a>
          <a href="https://www.linkedin.com/profile/view?id=130267670">
            <img alt="LinkedIn" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/linkedin.png" width="35" height="35" />
          </a>
          <a href="http://www.instagram.com/expeditiondocs">
            <img alt="Instagram" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/instagram.png" width="35" height="35" />
          </a>
          <a href="mailto:expeditiondocs@gmail.com">
            <img alt="Email" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/email.png" width="35" height="35" />
          </a>
          <a href="http://www.expeditiondocs.com/feed">
            <img alt="RSS" src="http://www.expeditiondocs.com/wp-content/uploads/2015/01/rss.png" width="35" height="35" />
          </a>
        </div>
        <!-- /.custom-social-icons -->
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
          <div class="custom-search">
    <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

        <label class="visually-hidden" for="s"></label>
        <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
        <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

    </form>
</div>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
<div class="custom-search">
	  <form id="searchform" class="form-search" action="<?php bloginfo('home'); ?>/" method="get">

	      <label class="visually-hidden" for="s"></label>
	      <input id="s" class="search-query" type="text" placeholder="Search" name="s"></input>
	      <input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit"></input>

	  </form>
</div>
      </div>
    </div>
  </div>

<?php endif; ?>

January 27, 2015 at 11:06 am #192800

Zeshan

Member

Hi Josh,

Thank you for writing in!

Please replace above provided CSS code with following:

.custom-search {
    color: #0157A8 !important;
    font-size: 18px !important;
}

@media (min-width: 980px) {
    .x-nav-wrap.desktop {
        vertical-align: middle;
        display: inline-block;
    }

    .x-navbar-inner {
        text-align: center;
    }

    .custom-search {
        margin: 0px 5px 0 10px !important;
        width: 20%;
        display: inline-block;
        vertical-align: middle;
    }   
}

@media (max-width: 979px) {
   .custom-search {
       display: block;
       width: 100%;
       margin-bottom: 10px !important;
       margin-top: 10px !important;
   }
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

January 27, 2015 at 11:34 am #192829

mutzy94

Participant

Perfect, thanks again!

January 27, 2015 at 2:19 pm #192928

Nabeel A

Moderator

You’re most welcome 🙂

February 20, 2015 at 4:48 am #210887

Nicolas Z

Participant

Hi Support,

Is it possible to change the position of the search bar in ethos navbar ? Like put it on the middle of the navbar menu ?

Have a nice day, thanks for your help.

February 20, 2015 at 1:47 pm #211261

Zeshan

Member

Hi Nicolas,

This isn’t possible as navbar links are generated dynamically and search bar comes after them. Though, it could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

February 25, 2015 at 4:41 am #214770

mutzy94

Participant

For some reason this has stopped working. Every time I try to search something I get an error message. Here is my website again: http://www.expeditiondocs.com

It doesn’t appear as if any of my custom css has changed and my custom _navbar.php still seems okay. Here is what is in there now:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// —————————————————————————–
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

<?php if ( ( $navbar_position == ‘static-top’ || $navbar_position == ‘fixed-top’ || $is_one_page_nav ) && $logo_nav_layout == ‘stacked’ ) : ?>

<div class=”x-navbar-wrap”>
<div class=”<?php x_navbar_class(); ?>”>
<div class=”x-navbar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_nav’, ‘primary’ ); ?>
<div class=”custom-search”>
<form id=”searchform” class=”form-search” action=”<?php bloginfo(‘home’); ?>/” method=”get”>

</form>
</div>
</div>
</div>
</div>
</div>

<?php else : ?>

<div class=”x-navbar-wrap”>
<div class=”<?php x_navbar_class(); ?>”>
<div class=”x-navbar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_brand’ ); ?>
<?php x_get_view( ‘global’, ‘_nav’, ‘primary’ ); ?>
</div>
<div class=”custom-search”>
<form id=”searchform” class=”form-search” action=”<?php bloginfo(‘home’); ?>/” method=”get”>

</form>
</div>
</div>
</div>
</div>

<?php endif; ?>

Any ideas? Thanks!

February 25, 2015 at 8:48 am #214936

Paul R

Moderator

Hi,

Please replace all occurrences of


<?php bloginfo(‘home’); ?>/

with


<?php echo home_url( '/' ); ?>

Hope that helps.

February 25, 2015 at 9:21 am #214975

mutzy94

Participant

Looks good, thanks!

Author

Posts

1 2 3 →

<script> jQuery(function($){ $("#no-reply-191021 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>