[Resolved] logo centered on nav, a little more help

Home Forums Support [Resolved] logo centered on nav, a little more help

Home Forums Support logo centered on nav, a little more help

  • This topic has 23 replies, 3 voices, and was last updated 4 years ago by Tom.
Viewing 9 posts - 16 through 24 (of 24 total)
  • Author
    Posts
  • #1181640
    Leo
    Staff
    Customer Support

    Can you remove this entire block for now so I can see the original issue?
    https://www.screencast.com/t/uvaCR8PkL

    Also make sure you don’t have any extra { or }

    #1181642
    sparkle

    ok, that’s removed. i wanted the centered logo and spacer to disappear below 1024.

    #1181644
    Leo
    Staff
    Customer Support

    Ok now add Tom’s CSS back in:
    https://generatepress.com/forums/topic/logo-centered-on-nav-a-little-more-help/#post-1175829

    I’m not sure where you got the rest from?

    #1181648
    sparkle

    done. the logo doesn’t disappear.

    #1181903
    Tom
    Lead Developer
    Lead Developer

    Strange. Instead of the CSS in the article, can you try 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;
            }
    }
    #1182084
    sparkle

    ok. i’ve swapped that out, but am still not seeing the logo disappear at 1024. the menu toggle is closed now tho :). all plugins are still disabled.

    #1182471
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (min-width: 769px) and (max-width: 1024px) {
        .site-logo {
            display: none;
        }
    }
    #1182479
    sparkle

    i put that at the bottom of the block… but check this out:
    https://www.loom.com/share/a059ff91cf304477b9ceae6fddf78f07

    #1182894
    Tom
    Lead Developer
    Lead Developer

    The code is working, but the overlap you’re seeing is happening before 1024px. Have you tried increasing that value?

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