- This topic has 23 replies, 3 voices, and was last updated 4 years ago by Tom.
-
AuthorPosts
-
March 1, 2020 at 12:53 pm #1181640LeoStaffCustomer Support
Can you remove this entire block for now so I can see the original issue?
https://www.screencast.com/t/uvaCR8PkLAlso make sure you don’t have any extra
{
or}
March 1, 2020 at 12:55 pm #1181642sparkleok, that’s removed. i wanted the centered logo and spacer to disappear below 1024.
March 1, 2020 at 12:57 pm #1181644LeoStaffCustomer SupportOk now add Tom’s CSS back in:
https://generatepress.com/forums/topic/logo-centered-on-nav-a-little-more-help/#post-1175829I’m not sure where you got the rest from?
March 1, 2020 at 1:02 pm #1181648sparkledone. the logo doesn’t disappear.
March 2, 2020 at 12:09 am #1181903TomLead DeveloperLead DeveloperStrange. 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; } }
March 2, 2020 at 4:25 am #1182084sparkleok. 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.
March 2, 2020 at 8:23 am #1182471TomLead DeveloperLead DeveloperTry this:
@media (min-width: 769px) and (max-width: 1024px) { .site-logo { display: none; } }
March 2, 2020 at 8:31 am #1182479sparklei put that at the bottom of the block… but check this out:
https://www.loom.com/share/a059ff91cf304477b9ceae6fddf78f07March 2, 2020 at 6:31 pm #1182894TomLead DeveloperLead DeveloperThe code is working, but the overlap you’re seeing is happening before 1024px. Have you tried increasing that value?
-
AuthorPosts
- You must be logged in to reply to this topic.