Shoopping cart and search near to logo

[Daniele]

Hello guys,
I would like to show shopping cart and search icons near to logo, like this website:
https://www.thedressingscreen.com/

How can I achieve this result?

thanks!

[David]

Hi there,

hmmm…. my approach would be this:

1. Create a new menu, don’t add any menu items and assign it to your primary navigation. This way it can display just the search and cart.
2. Then create the full menu and add that to the Secondary Nav and Off Canvas Panel ( For mobile ).
2.1 The secondary nav can be set to Below Header and we can remove it with some CSS on mobile.
3. For your Primary Nav set it to Float right, so its in the same container as the Logo.

If you can set that up and share us a link i can then figure out the CSS for the layout.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Hi David,
thanks for your answer, do you think is more elegant this solution or modify any template?

[David]

Its not the most elegant way to do it – but it is the simplest way.
All other ways would probably require plugins and custom development.

Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Hi David,
maybe I found a solution,
line 471 functions.php of gp-premium plugin

function generatepress_wc_menu_cart( $nav, $args ) {
// If our primary menu is set, add the search icon
if ( $args->theme_location == apply_filters( ‘generate_woocommerce_menu_item_location’, ‘secondary’ ) && generatepress_wc_get_setting( ‘cart_menu_item’ ) ) {
$has_items = false;

I substituted ‘primary’ with ‘secondary’

then with CSS:
#secondary-navigation {
position: absolute;
top: 50px;
right: 50px;
}

So I obtain this:

Is this solution a sh**? 😀 sorry I’m a php noob

If it works can you give me a hint to place a filter in functions.php child theme? So I can update GP-premium without loosing edits

thanks!

[David]

Pretty good snooping for a PHP Noob 🙂

You can use this PHP Filter snippet to move the Cart to the Secondary Navigation:

https://docs.generatepress.com/article/generate_woocommerce_menu_item_location/

And you can even move the search to it:

https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

Might require some messing around on Mobile though

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Thanks mate!
Yes effectively with this solution I lose the cart in mobile near the logo 🙁

[David]

Yeah something we are looking at is to make it easier to move these menu items around.
It is possible with the wp_is_mobile() function to only move it on desktop …. but i wouldn’t rely on that function for something as important as the menu cart.

Based on the example design – the method i proposed above is one of the simplest solution. Is there any issues with using the Primary nav solely for the icons ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniele]

Yes I think I will go with the solution provided by you, in the meanwhile there are no better way to do it.
thanks!

[David]

Yeah sorry about that – i am still looking at options.
If you want to achieve the example design of search | logo | cart – then i am more than happy to help with the CSS

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts