Docs

[Nharris321]

Hi Team,

I currently have embedded a short code in my child theme’s function to display it in the navbar. How can I put this element under the brand’s logo instead of it being under the nav links? The current code makes the shortcode dependent on the position of the nav links.

Here is the current code I am using:

wp-content/themes/x-child/functions.php

// Add button to nav menu
// =============================================================================
function x_button_nav_item( $items, $args ) {

if ( $args->theme_location == ‘primary’ ) {
$items .= ‘<li class=”menu-item x-menu-item x-menu-item-button”>’
. ‘<span>’
. do_shortcode(‘[wpv-form-view name=”home-page-search” target_id=”3275″]’)
. ‘</span>’
. ‘‘;
}

return $items;

}
add_filter( ‘wp_nav_menu_items’, ‘x_button_nav_item’, 10000, 2);
// =============================================================================

Thank You!

[Christopher]

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.

[Nharris321]

Not a problem. Here is the temp url….
http://173.254.65.135/

[Nharris321]

This reply has been marked as private.

[Rad]

Hi there,

It shouldn’t be added as menu items if your target location is under the logo. Instead, please add this code to your child theme’s functions.php

add_action('x_after_view_global__brand', logo_shortcode, 99);
function logo_shortcode () {
echo do_shortcode('[wpv-form-view name="home-page-search" target_id="3275"]');
}

Hope this helps.

[Nharris321]

Hi Team,
Thank you so much for your help! The code worked out for me. I modified it just a tad to fit the look I am trying to achieve. How can I float the element to the center? Here is how I modified the code below:

// Add button to nav menu
// =============================================================================
add_action(‘x_after_view_global__nav-primary’, logo_shortcode, 99);
function logo_shortcode () {
echo do_shortcode(‘[wpv-form-view name=”home-page-search” target_id=”3275″]’);
}
// =============================================================================

Thanks!

[Lely]

Hi There,

Please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

form.wpv-filter-form.js-wpv-filter-form.js-wpv-filter-form-3352-TCPID1930.js-wpv-form-only {
    max-width: 565px;
    margin: 0 auto 1.313em;
}

Hope this helps.

[Nharris321]

This has worked out great on the homepage. However, It is only centered on the homepage and when I go to view other pages it goes back to an uncentered layout.

Also I noticed when viewing the site in google chrome there is a slight gap at the top of the page (see pic). How do I eliminate this?

Thank you!

[Nharris321]

I also notice on mobile the search bar is placed only under the brand logo and not the full width of the menu. How can I center the search bar on mobile? Here is the code I have:

@media (max-width:979px){
.form.wpv-filter-form.js-wpv-filter-form.js-wpv-filter-form-3352-TCPID1930.js-wpv-form-only {
max-width: 100%;

[Lely]

Hi There,

First please update the code to this:

form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
    max-width: 900px;
    margin: 0 auto 1.313em;
    padding-left: 200px;
}

It seems that the form is generating different class per page. We have remove that unique class so it will work on other pages as well.

The issue on mobile is because of 200px padding. We need to set it zero on mobile:

@media (max-width:979px){
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
    padding-left: 0px;
}
}

Regarding the slight gap, would you mind clarifying which gap you’re referring to?

[Nharris321]

Thank you so much for your help! This has solved the problem that allows the search to display the same from page to page; however the mobile still shows the padding. It makes sense that the mobile will display the padding this given your explanation.

As for the google chrome issue the gap is at the top of every page. I have attached a picture that compares and contrast chrome vs. safari so you can pinpoint the gap.

I appreciate the support!

[Jade]

Hi there,

Please use this code:

@media (max-width:979px){
    form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
        padding-left: 0px !important;
    }
}

.x-topbar {
    min-height: 0;
}

Hope this helps.

[Nharris321]

Thank you so much for your time this has solved my request. Have an awesome weekend!

[Friech]

We’re delighted to assist you with this. Have a nice weekend too.

Cheers!

[Nharris321]

Hi guys thanks for all the help for some reason today the pieces of code to center the search bar on desktop stopped working. I did not make any changes and cannot figure out the issue.

Thanks for the help so far!

[Author]

Posts