css - Wordpress: Problems with custom-logo & menu/sidebar-toggle -
i'm new wordpress , using skilt-theme new blog. i'm having problems custom-logo , sidebar-toggle.
without logo: click
with logo: click
as can see: sidebar-toggle moving down when uploading custom-logo. nice have whole menu @ same place before uploading logo. hope you'll find way fix it.
css:
.site-header { position: relative; z-index: 100; padding: 30px 0; padding: 3rem 0; } .site-header { color: inherit; } .site-title { line-height: 1; margin: 0; } .site-description { margin: 0; } @media screen , (min-width: 480px) { .site-title, .site-description { display: inline-block; vertical-align: middle; } .custom-logo { display: inline-block !important; vertical-align: middle; } .site-description { margin: 0 0 0 10px; } } .site-branding { float: left; } .site-navigation-toggle { color: #252931; right: 0; line-height: 1; z-index: 9000; font-size: 30px; font-size: 3rem; -moz-transition: opacity 150ms; -o-transition: opacity 150ms; -webkit-transition: opacity 150ms; transition: opacity 150ms; } .site-navigation-toggle .fa-bars { position: relative; top: -3px; max-height: 25px; display: inline-block; overflow: hidden; } .custom-logo { display: block; max-width: 100%; background-repeat: no-repeat; background-size: contain; background-position: center center; } .custom-logo { display: block; width: 100%; height: 0; font: 0/0 a; text-decoration: none; text-shadow: none; color: transparent; } .site-main { display: block; } .single .site-main, .page .site-main { background-color: #fff; padding: 30px; padding: 3rem; } .has-background .site-header, .has-background .site-footer, .has-background .social-links, .has-background .paging-navigation, .has-background .site-title { color: #fff; }
and header-code:
<div class="site-branding"> <?php if ( stag_get_logo()->has_logo() ) : ?> <div class="custom-logo"> <a rel="home" title="<?php esc_attr_e( 'home', 'stag' ); ?>" href="<?php echo esc_url( home_url('/') ); ?>"></a> </div> <?php else: ?> <h1 class="site-title"><a href="<?php echo esc_url( home_url() ); ?>"><?php bloginfo( 'name' ); ?></a></h1> <?php endif; ?> <?php $is_hiding = stag_theme_mod( 'title_tagline', 'hide-tagline' ); ?> <p class="site-description"<?php if ( $is_hiding ) echo ' hidden'; ?>><?php bloginfo( 'description' ); ?></p> </div> <?php stag_maybe_show_primary_menu( 'header' ); ?> <a href="#" id="site-navigation-toggle" class="site-navigation-toggle"><i class="fa fa-bars"></i></a> </header
i have been through site , found easiest solution @ moment.
please remove top css class class .site-navigation-toggle, .menu-header means :
.site-navigation-toggle, .menu-header { position:absolute;top:50%;transform: translatey(-50%);}
this should this
.site-navigation-toggle, .menu-header { position:absolute;transform: translatey(-50%);}
just removed top:50% , ok..
Comments
Post a Comment