[Resolved] Centering logo in main menu

[Alex]

Hello! I’d like to get some help with debugging CSS for placing logo in the center of the main navigation. The site is under construction mode.

I’ve tried to make it according to https://docs.generatepress.com/article/centering-logo-navigation/
But it turns out to be like on the screenshot provided. The current CSS is:

@media (min-width: 768px) 
{
    .main-navigation .menu>.menu-item>a:before,
    .main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
    .loud-link a:before {
        content: "";
        position: absolute;
        display: block;
        bottom: 0.8em;
        width: 0%;
        height:2px;
        background-color: currentColor;
        -webkit-transition: 0.3s width ease;
        transition: 0.3s width ease;}

.main-navigation .menu>.menu-item:hover>a:before,
.main-navigation .menu>.menu-item.sfHover>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {width: calc(100% - 50px);}
.loud-link a {position: relative; padding-right: 40px;}
.loud-link a:hover:before {width: calc(100% - 50px);}
.loud-link a:before {bottom: -0.3em;}
.loud-link a:after {content: '\21e2'; margin-left: 5px;}
}

Does it interfere with the CSS for centering the logo?

[David]

Hi there,

try adding the CSS that Leo provides here:

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

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

[Alex]

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

https://paste.pics/a8ce425d713bb6aeab983cadd65343f1

[David]

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.

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

[Alex]

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

[David]

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.

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

[Alex]

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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Alex]

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;
} );

[Alex]

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

[David]

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;
}

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

[Alex]

Thanks a lot for your help!

[David]

You’re welcome

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

[Author]

Posts