[everett rParticipant]

How can I add the search widget in the menu bar
Also what is the section at the top with the Black triangle and plus sign

[SupportMember]

Hi there,

Copy x/framework/views/global/_navbar.php to x-child/framework/views/global/_navbar.php search for </nav> and paste code below just after that line.

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

Final file should look like following

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Includes navbar output.
// =============================================================================

$get_name          = get_bloginfo( 'name' );
$get_description   = get_bloginfo( 'description' );
$x_logo            = get_theme_mod( 'x_logo' );
$has_primary_nav   = has_nav_menu( 'primary' );
$one_page_nav_meta = get_post_meta( get_the_ID(), '_x_page_one_page_navigation', true );
$one_page_nav      = ( $one_page_nav_meta == '' ) ? 'Deactivated' : $one_page_nav_meta;

?>

<div class="x-navbar-wrap">
  <div class="<?php x_navbar_class(); ?>">
    <div class="x-navbar-inner x-container-fluid max width">
      <?php if ( is_front_page() ) : echo '<h1 class="visually-hidden">' . $get_name . '</h1>'; endif; ?>
      <a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $get_description; ?>">
        <?php echo ( $x_logo == '' ) ? $get_name : '<img src="' . $x_logo . '" alt="' . $get_description . '">'; ?>
      </a>
      <a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-collapse">
        <i class="x-icon-bars"></i>
        <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
      </a>
      <nav class="x-nav-collapse collapse" role="navigation">

        <?php

        if ( $one_page_nav != 'Deactivated' ) :
          wp_nav_menu( array(
            'menu'       => $one_page_nav,
            'container'  => false,
            'menu_class' => 'x-nav x-nav-scrollspy sf-menu'
          ) );          
        elseif ( $has_primary_nav ) :
          wp_nav_menu( array(
            'theme_location' => 'primary',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu'
          ) );
        else :
          echo '<ul class="x-nav"><li><a href="' . home_url( '/' ) . 'wp-admin/nav-menus.php">Assign a Menu</a></li></ul>';
        endif;

        ?>

      </nav> <!-- end .x-nav-collapse.collapse -->
<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> <!-- end .x-navbar-inner -->
  </div> <!-- end .x-navbar -->
</div> <!-- end .x-navbar-wrap -->

Add following line of code to Customizer → Custom → CSS

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

Black triangle with black sign is to show widget bar.To add content in widget bar go to Appearance → Widgets and place whatever widget you want to appear there in Header Widget Area #1 and Header Widget Area #2 that will appear when you click that little plus icon on the triangle on top.

Screenshot: http://prntscr.com/38e3vb

You can add up to 4 widgets in widget bar to choose the number of widgets go to Customizer → Header → Header Widget Areas and choose the numbers.

There you can also adjust the widget bar button’s background color and hover color.

Screenshot: http://prntscr.com/38e4yp

Thanks

[everett rParticipant]

awesome help thanks

[everett rParticipant]

Copy x/framework/views/global/_navbar.php to x-child/framework/views/global/_navbar.php search for </nav> and paste code below just after that line.

Just guide me where i find this
Thanks

[SupportMember]

Hey there!

You need edit those files via FTP or your cpanel. If you’re not comfortable doing this yourself, look for services such as Microlancer or Tweaky for assistance.

Cheers!

[q jParticipant]

Hi Support, I followed these steps and got the search bar displayed but 2 issues:

1. Does not display in top menu bar
2. You can click to enter text and search

Let me know what info you need to debug, thank you.

[RubinKeymaster]

Hi There,

can you provide us with the address of the site so we can take a look at it to properly help you. Otherwise it would be a lot of guessing what’s going wrong. Thanks!

[Scott WigginsParticipant]

Why would you not have a simple way to add a search bar in the MAIN menu at the top of home page? I am not a coder at ALL and every answer I find in the knowledge base you have to enter code examples above. smh. simple yet not simple. Not as advertised.

[Rue NelModerator]

Hello There,

Thanks for updating this thread! The solution given on this thread is a bit older. In our latest X version, you can simply activate the search functionality for the navbar. If activated, an icon will appear that when clicked will activate the search modal. By default it is disabled. You can turn it on by going to Appearance > Customize > Header > Search.

Hope this helps.

[Scott WigginsParticipant]

I enabled the search icon in customizer under the header section, but when I typed in something relevant to my blog posts, there was no predictive search or anything, and it just took me to a page that said “sorry nothing found”. Do does someone have to type in the exact phrasing of what they are looking for?

[RupokMember]

Hi @scott-wiggins

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts