[Resolved] Centering logo in main menu

Home Forums Support [Resolved] Centering logo in main menu

Home Forums Support Centering logo in main menu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1579846
    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?

    #1579898
    David
    Staff
    Customer Support
    #1579921
    Alex

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

    https://paste.pics/a8ce425d713bb6aeab983cadd65343f1

    #1580176
    David
    Staff
    Customer Support

    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.

    #1580372
    Alex

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

    #1580714
    David
    Staff
    Customer Support

    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.

    #1581667
    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

    #1582026
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1582718
    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;
    } );
    
    #1582749
    Alex

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

    #1583141
    David
    Staff
    Customer Support

    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;
    }
    #1583464
    Alex

    Thanks a lot for your help!

    #1583629
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.