diff --git a/header.php b/header.php index 7d8027f..e315384 100644 --- a/header.php +++ b/header.php @@ -1,179 +1,185 @@ section and everything up till
* * @package kdetheme */ $show_logo = true; $show_title = false; $show_tagline = true; $logo = get_theme_mod('header_logo', ''); $header_show = get_theme_mod('header_show', 'logo-text'); if( $header_show == 'logo-only' ){ $show_tagline = false; } elseif( $header_show == 'title-only' ){ $show_tagline = $show_logo = false; } elseif( $header_show == 'title-text' ){ $show_logo = false; $show_title = true; } function get_custom_body_classes() { $classes = get_body_class(); if (array_search('custom-background', $classes) !== false) { unset($classes[array_search('custom-background', $classes)]); } return 'class="'.implode(' ', $classes).'"'; } ?> class="no-js"> <?php bloginfo( 'name' ); ?> >
ID, 'site_layout', true) ){ $layout_class = get_post_meta($post->ID, 'site_layout', true); } else{ $layout_class = get_theme_mod( 'kdetheme_sidebar_position' ); }?>
diff --git a/inc/css/header.css b/inc/css/header.css index 8def744..91c1e3d 100644 --- a/inc/css/header.css +++ b/inc/css/header.css @@ -1,344 +1,380 @@ .hidden { display: none !important; } #primary-header { font-family: 'Noto Sans', sans-serif; font-size: 14px; color: #31363b; background-color: #FAFAFA; background-clip: padding-box; height: auto; box-sizing: content-box; border-bottom: solid 2px #1287de; + min-height: 50px; } #primary-header > .container { position: relative; } #primary-header * { float: none !important; } #primary-header .container > * { height: 50px; line-height: 50px; vertical-align: top; margin: 0px; } #primary-header #header-nav, #primary-header #header-logo { float: none !important; display: inline-block; } #primary-header h1 a::before { font-family: 'glyph'; font-size: 32px; content: "K"; text-indent: 0px; position: absolute; top: 0px; left: 0px; width: 100%; text-align: center; line-height: 50px; } #primary-header h1 a { text-indent: -9999px; position: relative; display: inline-block; width: 60px; height: 50px; margin: 0px; line-height: 50px; outline: 0; } #primary-header h1 a:hover { background-color: #e7e5e5; } #primary-header h1 a:focus, #primary-header h1 a.active { background-color: #1287de; color: #FFF; } #primary-header .dropdown-menu { min-width: 320px; box-shadow: 0px 1px 8px rgba(0,0,0,.1); padding: 0px; border: solid 1px rgba(0,0,0,.2) !important; border-radius: 4px; line-height: 100%; background-color: #FAFAFA; + margin-top: 5px; } #primary-header .dropdown-toggle { padding-right: 40px; position: relative; } #primary-header a:after { font-family: "glyph"; font-weight: 400; font-size: 16px; margin-left: 10px; position: relative; display: inline-block; top: .1ex; transition: all .2s; color: #7a747c; text-decoration: none !important; vertical-align: middle; } #primary-header .menu-item-type-custom > a:after { content: "W"; } #primary-header .dropdown-toggle:after { content: "v" !important; } #primary-header .menu { margin: 0px; padding: 0px; } #primary-header .menu li { vertical-align: top; } #primary-header .menu > li a { height: 50px; display: inline-block; padding: 0px 20px; color: #343031; } #primary-header .menu > li a:hover { background-color: #e7e5e5; } #primary-header li.open > a, #primary-header li.active > a { background-color: #1287de !important; color: #FFF; } #primary-header li.open > a:after, .current_page_item a:after, #primary-header li.active > a:after { color: #FFF; } #primary-header li.open > a:after { transform: rotate(-180deg); -moz-transform: rotate(-180deg); } #primary-header .dropdown li a { margin: 0px; width: 100%; height: auto; box-sizing: border-box; padding: 10px 20px; background-color: transparent; border: none !important; } #primary-header .dropdown li:last-child, #primary-header .dropdown li:last-child a { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } #primary-header .dropdown li:first-child, #primary-header .dropdown li:first-child a { border-top-left-radius: 3px; border-top-right-radius: 3px; } #primary-header .menu-feature-image { border-top-left-radius: 3px; border-top-right-radius: 3px; background-size: cover; min-height: 160px; vertical-align: top; margin: -10px -20px 10px -20px; background-position: center; } #primary-header .menu-feature-link { border-bottom: solid 1px #dddbdb; } #primary-header .menu > li { display: inline-block; } #primary-header .navbar-right { position: absolute; text-align: right; right: 15px; top: 0px; } #primary-header #header-search-input { height: 30px; width: 100%; line-height: 30px; padding: 0px 40px 0px 5px; box-sizing: border-box; border: solid 1px #cac6c9; z-index: 1; transition: width .2s, color .2s; } #primary-header #header-search-submit { position: absolute; top: 11px; right: 1px; z-index: 2; width: 50px; height: 28px; text-indent: -9999px; padding: 0px; border: none; border-left: solid 2px #e7e5e5; border-radius: 0px 2px 2px 0px; background-color: transparent; outline: 0; } #primary-header #header-search-submit:after { font-family: 'glyph'; content: 'Q'; font-size: 18px; position: absolute; top: 0px; left: 0px; width: 100%; height: 28px; line-height: 28px; text-indent: 0px; color: #7a747c; } #primary-header #header-search-submit:focus { box-shadow: none; } #primary-header #header-search-form { position: relative; display: none; width: 250px; vertical-align: top; } #primary-header #header-search-form.js { display: inline-block; } #primary-header #header-search-form.js.active #header-search-submit:focus { background-color: #1287de; border-left-color: #0566af; } #primary-header #header-search-form.js.active #header-search-submit:focus:after { color: #FFF; } #header-search-input { width: 100%; } #primary-header #header-search-form.js:not(.active) #header-search-input { width: 50px; - color: transparent; + color: transparent !important; } +#primary-header #header-search-form.js.active #header-search-input::placeholder { color: #dddbdb; transition: color .2s; } +#primary-header #header-search-form.js.active #header-search-input::-webkit-input-placeholder { color: #dddbdb; transition: color .2s; } +#primary-header #header-search-form.js.active #header-search-input:-ms-input-placeholder { color: #dddbdb; transition: color .2s; } +#primary-header #header-search-form.js.active #header-search-input::-moz-placeholder { color: #dddbdb; transition: color .2s; } +#primary-header #header-search-form.js.active #header-search-input:-moz-placeholder { color: #dddbdb; transition: color .2s; } + +#primary-header #header-search-form.js:not(.active) #header-search-input::placeholder { color: transparent } +#primary-header #header-search-form.js:not(.active) #header-search-input::-webkit-input-placeholder { color: transparent } +#primary-header #header-search-form.js:not(.active) #header-search-input:-ms-input-placeholder { color: transparent } +#primary-header #header-search-form.js:not(.active) #header-search-input::-moz-placeholder { color: transparent } +#primary-header #header-search-form.js:not(.active) #header-search-input:-moz-placeholder { color: transparent } + + #primary-header #header-search-form.js:not(.active) #header-search-submit { border-color: transparent; cursor: text; } #primary-header #header-search-form.js.active #header-search-submit:after { content: ">"; } #primary-header #header-menu-button { display: none; font-family: 'glyph'; background-color: transparent; font-size: 22px; color: #7a747c; vertical-align: top; line-height: 50px; padding: 0px; margin: 0px; border: none; width: 60px; } #primary-header.toggle-nav .container { width: 100%; max-width: 100%; } #primary-header.toggle-nav #header-menu-button { display: inline-block; } #primary-header.toggle-nav #header-nav { display: none; height: auto; margin: 0px -15px 0px -15px; border-top: solid 1px #e7e5e5; } #primary-header.toggle-nav #header-nav.active { display: block; } #primary-header.toggle-nav #header-nav .menu-item { display: block; } #primary-header.toggle-nav #header-nav .menu-item a { display: block; } #primary-header.toggle-nav .dropdown-menu { position: relative; padding: 0px; margin: 0px; border: none !important; border-radius: 0px !important; box-shadow: none !important; width: 100%; border-bottom: solid 2px #dddbdb !important; } #primary-header.toggle-nav .menu-feature-image { border: none !important; border-radius: 0px !important; box-shadow: none !important; } #primary-header.toggle-nav .dropdown-toggle:after { position: absolute; right: 15px; } +#primary-header #header_user_menu { + height: 50px; + vertical-align: top; + display: inline-block; +} + +#primary-header #header_user_menu #header_user_avatar { + text-align: left; + display: block; + vertical-align: top; + margin: 10px 0px 10px 20px; + width: 30px; + height: 30px; + text-indent: -9999px !important; + border-radius: 100%; + border: solid 1px rgba(0,0,0,.1); + background-clip: border-box; + box-sizing: border-box; + background-size: cover; +} + diff --git a/inc/js/header.js b/inc/js/header.js index 3762da0..eed8e0a 100644 --- a/inc/js/header.js +++ b/inc/js/header.js @@ -1,63 +1,68 @@ (function ( $ ) { var headerLeftWidth = 0; function recalculateHeader () { var headerInnerWidth = $('#primary-header').innerWidth(); - var headerRightWidth = $('#header-search-form').outerWidth(); + var headerRightWidth = $('#header-right-content').outerWidth(); + + console.log(headerRightWidth); var newState = headerInnerWidth < headerLeftWidth + headerRightWidth; var oldState = $('#primary-header').hasClass('toggle-nav'); if (newState != oldState) { $('#header-nav').removeClass('active'); - $('#primary-header').toggleClass('toggle-nav', newState); } + + $('#primary-header').toggleClass('toggle-nav', newState); } $(document).ready(function() { - $('#header-logo, #header-nav').each(function(index) { - headerLeftWidth += $(this).outerWidth(); - }); - - recalculateHeader(); $('#header-search-form').addClass('js'); $('#header-search-submit').attr('type', 'button'); if ($('#header-search-input').val() != '') { $('#header-search-form').addClass('active'); } $('#header-search-submit').click(function( event ) { if ($('#header-search-form').hasClass('active')) { $('#header-search-submit').attr('type', 'submit'); $('#header-search-form').submit(); } else { $('#header-search-input').focus(); $('#header-search-form').addClass('active'); } }); $('#header-menu-button').click(function() { $('#header-nav').toggleClass('active'); }); + + + $('#header-logo, #header-nav').each(function(index) { + headerLeftWidth += $(this).outerWidth(); + }); + + recalculateHeader(); }); $(window).resize(function() { recalculateHeader(); }); $(document).mouseup(function() { if ($('#header-search-form').has(document.activeElement).length == 0 && $('#header-search-input').val() == '') { $('#header-search-form').removeClass('active'); recalculateHeader(); } }); }( jQuery ));