Show Cart and account button in top bar (Use Navigation as Header)

Hi there,

Thank you for creating a new topic.

Can you try enabling “Display cart in menu” in Appearance > Customize > Layout > WooCommerce as such?: https://share.getcloudapp.com/RBunBGOq

Then, hook you account icon to menu_bar_items instead?

Kindly let us know once you’ve applied the changes. Hope to hear from you soon. :)

Thanks for that, unfortunately it didn't make a difference.

I am using the following code:

@media(min-width: 769px) {
.inside-header>.site-branding,
.inside-header>.navigation-branding,
.inside-header>.site-logo,
.site-branding-container,
#site-navigation .navigation-branding .site-logo,
#sticky-navigation .navigation-branding {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}

#site-navigation {
margin-left: unset !important;
display: flex;
}

.site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
margin: unset;
}

#site-navigation,
#primary-menu,
.main-navigation .inside-navigation {
flex: 1;
}

/* Change nth-child(#) to first item to right */
.main-navigation ul li:nth-child(4) {
margin-left: auto;
}
}

function generate_woo_cart(){
ob_start();
if ( ! class_exists( 'WooCommerce' ) ) {
return;
}

if ( ! isset( WC()->cart ) ) {
return;
}

$has_items = false;

if ( ! WC()->cart->is_empty() ) {
$has_items = 'has-items';
}

printf(
'<span class="menu-bar-item wc-menu-item %2$s %3$s">
%1$s
</span>',
generatepress_wc_cart_link(),
is_cart() ? 'current-menu-item' : '',
$has_items
);
return ob_get_clean();
}
add_shortcode('custom_cart', 'generate_woo_cart');

You have a Code in the style.css of you child theme that hides the cart icon. Specifically, this one:

@media (min-width: 769px) {
    .wc-menu-cart-activated.main-navigation span.menu-bar-item.wc-menu-item {
        /* display: none; */
    }
}

As of now, this is what it looks like with the code removed: https://share.getcloudapp.com/yAuKAw0R

Kindly remove that and let’s see how to go from there.

Hope this clarifies. :)

Thanks Fernando,

That worked but it also broke the menu. It would be great if it can show outside of the menu

This code would fix the look on Desktop:

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .menu-bar-items {
    position: absolute;
    right: 20px;
}

nav#site-navigation {
    position: relative;
    width: 100%;
}

nav#site-navigation .inside-navigation{
    position: unset;
}

}

However, as the screen gets smaller, the nav gets cramped. You’re reference site decreases its menu-item’s font-size as the screen gets smaller. It also has a different layout on mobile.

You may alter the menu item sizes through Appearance > Customize > Typography.

Kindly let us know if further assistance with this would be needed.

Thanks Fernando,

That is working great.
Thank you so much for your help :-)

You’re welcome! Glad to be of assistance! Feel free to reach out anytime if you’ll need further assistance regarding this. :)