Centering logo in main menu

Hi there,

try adding the CSS that Leo provides here:

https://generatepress.com/forums/topic/home-page-header-problem-menu-squish-logo/#post-1530514

Sorry, David, it doesn't help. The menu is aligned left and overlaps the centered logo

https://paste.pics/a8ce425d713bb6aeab983cadd65343f1

Could you provide me with temporary login access to the site so i can see whats needed?
You can provide URL and login details in the Private Information field.

David, here is login details. You'll find the global CSS in elements and logo centering CSS in the theme customizer.

You can try this CSS:

@media(min-width: 769px) {
    .main-navigation li:nth-child(5) {
        margin-left: auto;
    }
    .navigation-branding img {
        margin-right: unset !important;
    }
}

But your menus are very large so you may need to reduce the font size and menu item spacing to stop them from overlapping the logo.

David, thanks for your advises and assistance. I've managed to set up logo in the center by combining my CSS and from the Split theme. It needs flexbox to be on and doesn't work in floats mode, I didn't know that. But now flexbox adds another shopping cart in the menu. Is there something to be done to delete it? Mine is with items quantity number.

https://paste.pics/c9bfbda0940808bb2a55cd39111a08a2

Hi there,

Are you using any custom code to change/add the cart menu item? The actual menu item one shouldn't be showing when using flexbox.

Let us know :)

Yes, Tom, the following code is used and it causes double cart icon:

  
/*Show number of items in cart*/
function custom_wc_cart_link() {
    ob_start();
    ?>
    <a>" class="cart-contents">
		<?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
		<span class="amount"><?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?></span>
	</a>
    <?php
    return ob_get_clean();
}
remove_filter( 'wp_nav_menu_items','generatepress_wc_menu_cart', 10, 2 );
add_filter( 'wp_nav_menu_items', function( $nav, $args ) {
    if ( $args->theme_location == 'primary' && generatepress_wc_get_setting( 'cart_menu_item' ) ) {
        return sprintf(
            '%1$s
            <li class="wc-menu-item %4$s" title="%2$s">
                %3$s
            </li>',
            $nav,
            esc_attr__( 'View your shopping cart','generate-woocommerce' ),
            custom_wc_cart_link(),
            is_cart() ? 'current-menu-item' : ''
        );
    }
    return $nav;
}, 10, 2 );
add_filter( 'woocommerce_add_to_cart_fragments', function( $fragments ) {
	ob_start();
	?>
	<a>" class="cart-contents">
		<?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?>
		<span class="amount"><?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?></span>
	</a>
	<?php
	$fragments['a.cart-contents'] = ob_get_clean();
	return $fragments;
} );

Is it possible to keep the logo centered in sticky navigation mode?

Change this CSS:

.site-branding, .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

to:

.site-branding, .site-logo, .sticky-navigation-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
}

Thanks a lot for your help!

You're welcome