Docs

[websperations]

http://www.heavensent.life/

I want to replace the navbar Search Icon with a Search Bar.

I have accomplished this before however I am struggling to get it to work properly this time.

I followed these instructions https://community.theme.co/forums/topic/search-bar-in-navbar/

I crated the _navbar.php and put it into /wp-content/themes/x-child/framework/views/global

The file contains:

<?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; ?>

The search bar shows up below my navbar instead of replacing the search icon. I attached a screenshot of this.

How can I get the navbar to replace the search icon and show on the navbar where I want it?

Thanks,

Micah

[websperations]

This reply has been marked as private.

[websperations]

Please note that I removed the _navbar.php as this site is now live.

Micah

[Rad]

This reply has been marked as private.

[Author]

Posts