[Resolved] how to change position of search icon

[Gaurav]

Hi, please let me know how do i swap the position of Wishlist heart icon and search icon, i added wishlist icon using primary menu navigation label, and search is enabled through customization option,

i searched through forum, by disabling the default search, and adding one with search custom css, but its moving the search after cart icon instead of swaping with wishlist, so it didn’t help

PFA,

image link: https://postimg.org/image/hoqxu5u0l/

[Gaurav]

using generatepress 1.4.3

[Tom]

Hi there,

Any chance you can link me to your site?

Not sure how you added the wishlist icon – can you try adding it as a menu item?: https://docs.generatepress.com/article/adding-icons-to-menu-items/

[Gaurav]

Hi Tom, yes i added it as menu item, and added icon using font awesome, here is the website link: http://www.greatgoga.info/

[Tom]

Did you add the menu-item-float-right class to the menu item?

[Gaurav]

added that class, now it moved to right, but on right i want cart button,

i want search, wishlist, then cart icon, this order,

[Gaurav]

as i said in my first query : “how do i swap the position of Wishlist heart icon and search icon”, so that the cart icon remains on the right

[Tom]

Hmm, ok. Remove the menu item.

Then add this PHP:

add_filter( 'wp_nav_menu_items', 'tu_add_icon_after_search', 15, 2 );
function tu_add_icon_after_search( $nav, $args ) {
    if ( $args->theme_location == 'primary' ) {
        return $nav . '<li class="wishlist-item"><a href="http://www.greatgoga.info/wishlist/"><i class="fa fa-fw fa-heart" aria-hidden="true"></i></a></li>';
    }

    return $nav;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Gaurav]

Thank you for the reply,
removed the menu item and added that php, but it showed
wishlist, search, cart.. arrangement, (which was earlier showing by default) instead of,

Search, wishlist, cart arrangement.

[Tom]

Getting closer, now add this CSS:

.main-navigation li.search-item {
    float: none;
    display: inline-block;
}

[Gaurav]

added css, but didn’t work 🙁

[Leo]

Can you try this instead of Tom’s last CSS:

.main-navigation li.search-item {
    float: left;
    display: inline-block;
}

[Gaurav]

ok, it worked,

Thank you 🙂

[Leo]

Glad we could help!

[Author]

Posts