[Resolved] Logo in the nav center

Home Forums Support Logo in the nav center

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1018816
    Dmitry

    Hi!

    Can you help a little?

    I use this method https://docs.generatepress.com/article/centering-logo-navigation/

    If I do so, primary nav dont disappear for the mobile version. And extra margin appears in sticky nav.

    #1018827
    Leo
    Staff
    Customer Support

    Hi there,

    That’s weird. Looks like the toggle isn’t kicking in?

    I don’t think that’s because of the CSS for centering the logo.

    Can you temporarily disable that CSS so I can check?

    Thanks!

    #1018858
    Dmitry

    Disabled

    #1018883
    Leo
    Staff
    Customer Support

    Looks like the center logo CSS is the issue.

    Can you add it back in again?

    Thanks 🙂

    #1018902
    Dmitry

    Done

    #1018921
    Leo
    Staff
    Customer Support

    Are you using any caching plugins or server cache at all?

    If so can you turn them off for now?

    Let me know 🙂

    #1019031
    Dmitry

    Nope

    #1019042
    Leo
    Staff
    Customer Support

    Ok try modifying your CSS to this:

    @media (min-width: 769px) {
    .inside-header {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-webkit-box-align: center;
    	    -ms-flex-align: center;
    	        align-items: center;
    }
    
    .header-widget {
    	order: 10;
    	overflow: visible;
    }
    
    .nav-float-right .header-widget {
    	top: auto;
    }
    
    .nav-float-right .header-widget .widget {
    	padding-bottom: 0;
    }
    
    .site-branding,
    .site-logo {
    	position: absolute;
    	left: 50%;
    	-webkit-transform: translateX(-50%);
    	        transform: translateX(-50%);
    	z-index: 200;
    }
    #mobile-header .mobile-bar-items {
    	-webkit-box-ordinal-group: 5;
    	-ms-flex-order: 4;
    	order: 4;
    	margin-left: auto;
    }
    #site-navigation {
    	float: none;
    	width: 100%;
    }
    
    .main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    }
    
    .main-navigation .menu-item-separator {
    	-webkit-box-flex: 1;
    	    -ms-flex-positive: 1;
    	        flex-grow: 1;
    }
    
    .main-navigation .menu-item-separator a {
    	font-size: 0;
    	background: transparent !important;
    }
    
    .slideout-navigation .menu-item-separator,
    .main-navigation.toggled .menu-item-separator{
    	display: none !important;
    }
    }
    @media (max-width: 768px) {
    	.inside-header>:not(:last-child):not(.main-navigation) {
    		margin-bottom: 0;
            }
    }
    #1019047
    Dmitry

    That works! But there is still some issue in sticky nav:
    1. large padding in the separator place.
    2. It disappears after reducing window width

    #1019086
    Leo
    Staff
    Customer Support

    1. Not seeing this issue:
    https://www.screencast.com/t/fMToRylAD

    Am I missing something here?

    2. So you want the logo in the middle and toggle on the right?

    Let me know 🙂

    #1019498
    Dmitry

    I mean the issue is with stick nav, not primary

    #1020059
    Tom
    Lead Developer
    Lead Developer

    1. Try adding this CSS:

    .navigation-stick .menu-item-separator {
        display: none !important;
    }

    2. What disappears exactly? I’m not seeing anything disappear as I reduce the window width.

    Let me know 🙂

    #1024220
    Dmitry

    Great! And the last: how can I manage the gap between menu items? When primary nav becomes more narrow the gaps become not the same.

    You can check It on a main page and on a screenshot: https://www.screencast.com/t/P8m1vH8C

    #1024818
    Tom
    Lead Developer
    Lead Developer

    The logo is centered regardless of where the menu items are (so it’s true centered). If you want the space to match, you’ll need to reduce the space between menu items a bit so it gives it more space on either side of the logo.

    Let me know if you need more info 🙂

    #1025071
    Dmitry

    Super! Let me know – the issue happened because of my CSS or it was originally in GP docs?

    P.S. Im saving all useful specific css blocks for quick use in future projects with GP

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.