[ChristopherModerator]

Hi there,

Please update previous CSS to :

.x-navbar.x-navbar-fixed-top.scrolled .bt-search-container {
    padding-top: 8px;
}

.x-navbar .bt-search-container {
    padding-top: 19px;
}
input#bt-search-field {
    height: 2.5em;
}
button.bt-search-submit.icon-search-2 {
    height: 1.33em !important;
    padding-top: 5px !important;
}

Hope it helps.

[xtjoeywxParticipant]

I’ve changed my nav bar back to normal and I changed the color to blue. To make things look better I would like to move the jano custom search field to a submenu drop down and just have a search icon in the nav bar. In other words, once someone clicks the fake search icon it will expand the submenu and expose the search form there. I want the search form to be larger than it currently is and centered in the middle of the submenu. How do I achieve this in the submenu? I know how to add a search icon already.

[xtjoeywxParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thanks for writing in! Regretfully this isn’t a feature offered by X. 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!

[xtjoeywxParticipant]

Can’t you just edit this code to put it into the submenu instead of the primary menu?

function x_navbar_search_navigation_custom( $items, $args ) {

      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . do_shortcode('[bt_search_form Placeholder="Search Products" posttype="product" perPage="10" loader="loader-1" loaderImg="" resultContainerWidth="650px" ]') 
                . '</li>';
      }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_custom', 9998, 2 );

[xtjoeywxParticipant]

I used this code (below) to achieve what I wanted. Now I just need help styling it. I want the submenu bar to span across the screen like the other submenu items on the site. I would like the search bar to be longer. I have it at 800px but it is still staying small.

add_filter('wp_nav_menu', 'menu_enable_shortcode', 20, 2);

function  menu_enable_shortcode ( $menu, $args ) {
return do_shortcode( $menu );
}

[JadeModerator]

Hi there,

Please add this CSS:

#menu-item-20594 {
    position: static !important;
}

Hope this helps.

[xtjoeywxParticipant]

That just pushed it all the way to the right of the page. The search results are off the page.

[Paul RModerator]

Hi,

You can try this code instead.

#menu-item-20594 {
    position: static !important;
}

#menu-item-20594 .sub-menu {
    width:100%;
}

Hope that helps.

[xtjoeywxParticipant]

That worked great for the desktop version but it goes off the screen on mobile. Can we add something to that to make the it stay inside the mobile sub menu?

[DarshanaModerator]

Hi there,

Could you please try adding the following CSS media query also into your Customizer, Custom > CSS area.

@media (max-width:768px) {
  .bt-search-field-container {
    width: 100% !important;
  }
}

Hope that helps.

[xtjoeywxParticipant]

Perfect! You guys are awesome. Thank you!

[NicoModerator]

Happy to hear that!

Feel free to ask us again.

Thanks.

[Author]

Posts