Sticky Menu e logo no tema Avada
-
Pessoal, não sei se alguém pode me ajudar… to com concluindo um site, utilizando o tema Avada.
E esse tema possui o esquema de sticky menu, estou acostumado a trabalhar com menu simples e tal e isso tá me deixando louco.Bom, o problema aqui é o seguinte. Tenho o logo normal, acima do menu, no header. Beleza, quando visualizo o restante da página, o menu modifica e o logo diminui e fica na esquerda do menu. até ai, tá tudo certo. Já configurei as cores. O que eu não consigo mesmo são duas coisas:
Quando o menu modifica e o logo diminui, eu gostaria/precisaria deixa-lo de outra cor. Ou melhor, trocar a imagem do logo original por um logo branco;
E no menu, já editei e reeditei o style.css pra colocar o a:active pra quando eu clicar num item do menu, este item fique de cor diferente. Não importa se for a fonte ou o bg deste item, mas, já tentei de todas as formas.
Acho que até decorei o style. css desse site inteiro.Se alguém puder me ajudar, ficarei muito agradecido! MESMO
O link:
http://www.monthele.com.br/teste
-
Pelo o que vejo no código do seu header.php, talvez o trecho de código responsável pelo topo, esteja em outro arquivo…
Note:
get_template_part( 'framework/templates/header' );Vá no caminho especificado na função que você vai encontrar o arquivo header.php que contem o código que você procura (Assim espero!) … Tem temas que são péssimos! Muito difíceis pra quem quer customizar… Por isso raramente uso temas prontos.
Abs.
opa, acho que achei aqui, seguindo o caminho.
<?php global $smof_data,$woocommerce,$main_menu; ?> <?php $c_pageID = get_queried_object_id(); $header_sticky_bg_color_hex = avada_hex2rgb($smof_data['header_sticky_bg_color']); $header_normal_bg_color_hex = avada_hex2rgb($smof_data['header_sticky_bg_color']); $header_normal_bg_color = $header_sticky_bg_color_hex[0] . ',' . $header_sticky_bg_color_hex[1] . ',' . $header_sticky_bg_color_hex[2] . ',' . $smof_data['header_sticky_opacity']; if( ( ($smof_data['header_transparent'] && get_post_meta($c_pageID, 'pyre_transparent_header', true) != 'no') || ( ! $smof_data['header_transparent'] && get_post_meta($c_pageID, 'pyre_transparent_header', true) == 'yes') ) && ! is_search() ) { $header_normal_bg_color = 'none'; } ?> <?php if( $smof_data['header_sticky'] ): ?> <header id="header-sticky" class="sticky-header"> <div class="sticky-shadow"> <div class="avada-row"> <div class="logo"> <a href="<?php bloginfo('url'); ?>"> <img src="<?php echo $smof_data['logo']; ?>" alt="<?php bloginfo('name'); ?>" data-max-width="<?php echo $smof_data["header_sticky_logo_max_width"]; ?>" class="normal_logo" /> <?php if($smof_data['logo_retina'] && $smof_data['retina_logo_width'] && $smof_data['retina_logo_height']): ?> <?php $pixels =""; if(is_numeric($smof_data['retina_logo_width']) && is_numeric($smof_data['retina_logo_height'])): $pixels ="px"; endif; ?> <img src="<?php echo $smof_data["logo_retina"]; ?>" alt="<?php bloginfo('name'); ?>" style="width:<?php echo $smof_data["retina_logo_width"].$pixels; ?>;height:<?php echo $smof_data["retina_logo_height"].$pixels; ?>;" data-max-width="<?php echo $smof_data["header_sticky_logo_max_width"]; ?>" class="retina_logo" /> <?php endif; ?> </a> </div> <nav id="sticky-nav" class="nav-holder"> <ul class="navigation menu fusion-navbar-nav"> <?php if ( has_nav_menu( 'sticky_navigation' ) ) { if(! $smof_data['disable_megamenu']) { wp_nav_menu(array( 'theme_location' => 'sticky_navigation', 'depth' => 5, 'container' => false, 'menu_id' => 'nav', 'items_wrap' => '%3$s', 'menu_class' => 'nav fusion-navbar-nav', 'fallback_cb' => 'FusionCoreFrontendWalker::fallback', 'walker' => new FusionCoreFrontendWalker() )); } else { wp_nav_menu(array('theme_location' => 'sticky_navigation', 'depth' => 5, 'container' => false, 'menu_id' => 'nav', 'items_wrap' => '%3$s')); } } else { echo $main_menu; } ?> <?php if(class_exists('Woocommerce')): ?> <?php if($smof_data['woocommerce_acc_link_main_nav']): ?> <li class="my-account"> <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account-link"><?php _e('My Account', 'Avada'); ?></a> <?php if(!is_user_logged_in()): ?> <div class="login-box"> <form action="<?php echo wp_login_url(); ?>" name="loginform" method="post"> <p> <input type="text" class="input-text" name="log" id="username" value="" placeholder="<?php echo __('Username', 'Avada'); ?>" /> </p> <p> <input type="password" class="input-text" name="pwd" id="pasword" value="" placeholder="<?php echo __('Password', 'Avada'); ?>" /> </p> <p class="forgetmenot"> <label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"> <?php _e('Remember Me', 'Avada'); ?></label> </p> <p class="submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button small default comment-submit" value="<?php _e('Log In', 'Avada'); ?>"> <input type="hidden" name="redirect_to" value="<?php echo $_SERVER['HTTP_REFERER']; ?>"> <input type="hidden" name="testcookie" value="1"> </p> <div class="clear"></div> </form> </div> <?php else: ?> <ul class="sub-menu"> <li><a href="<?php echo get_permalink(get_option('woocommerce_logout_page_id')); ?>"><?php _e('Logout', 'Avada'); ?></a></li> </ul> <?php endif; ?> </li> <?php endif; ?> <?php if($smof_data['woocommerce_cart_link_main_nav']): ?> <li class="cart"> <?php if(!$woocommerce->cart->cart_contents_count): ?> <a class="my-cart-link" href="<?php echo get_permalink(get_option('woocommerce_cart_page_id')); ?>"></a> <?php else: ?> <a class="my-cart-link my-cart-link-active" href="<?php echo get_permalink(get_option('woocommerce_cart_page_id')); ?>"></a> <div class="cart-contents"> <?php foreach($woocommerce->cart->cart_contents as $cart_item): //var_dump($cart_item); ?> <div class="cart-content"> <a href="<?php echo get_permalink($cart_item['product_id']); ?>"> <?php echo get_the_post_thumbnail($cart_item['product_id'], 'recent-works-thumbnail'); ?> <div class="cart-desc"> <span class="cart-title"><?php echo $cart_item['data']->post->post_title; ?></span> <span class="product-quantity"><?php echo $cart_item['quantity']; ?> x <?php echo $woocommerce->cart->get_product_subtotal($cart_item['data'], 1); ?></span> </div> </a> </div> <?php endforeach; ?> <div class="cart-checkout"> <div class="cart-link"><a href="<?php echo get_permalink(get_option('woocommerce_cart_page_id')); ?>"><?php _e('View Cart', 'Avada'); ?></a></div> <div class="checkout-link"><a href="<?php echo get_permalink(get_option('woocommerce_checkout_page_id')); ?>"><?php _e('Checkout', 'Avada'); ?></a></div> </div> </div> <?php endif; ?> </li> <?php endif; ?> <?php endif; ?> <?php if($smof_data['main_nav_search_icon']): ?> <li class="main-nav-search"> <a id="sticky-nav-search-link" class="search-link"></a> <div id="sticky-nav-search-form" class="main-nav-search-form"> <form role="search" id="searchform" method="get" action="<?php echo home_url( '/' ); ?>"> <div class="search-table"> <div class="search-field"> <input type="text" value="" name="s" id="s" /> </div> <div class="search-button"> <input type="submit" id="searchsubmit" value="" /> </div> </div> </form> </div> </li> <?php endif; ?> </ul> </nav> <?php if(tf_checkIfMenuIsSetByLocation('main_navigation') || tf_checkIfMenuIsSetByLocation('sticky_navigation')): ?> <div class="mobile-nav-holder"></div> <?php endif; ?> </div> </div> </header> <?php endif; ?>Acho que teria que alterar a parte:
<div class="avada-row"> <div class="logo"> <a href="<?php bloginfo('url'); ?>"> <img src="<?php echo $smof_data['logo']; ?>" alt="<?php bloginfo('name'); ?>" data-max-width="<?php echo $smof_data["header_sticky_logo_max_width"]; ?>" class="normal_logo" /> <?php if($smof_data['logo_retina'] && $smof_data['retina_logo_width'] && $smof_data['retina_logo_height']): ?> <?php $pixels =""; if(is_numeric($smof_data['retina_logo_width']) && is_numeric($smof_data['retina_logo_height'])): $pixels ="px"; endif; ?> <img src="<?php echo $smof_data["logo_retina"]; ?>" alt="<?php bloginfo('name'); ?>" style="width:<?php echo $smof_data["retina_logo_width"].$pixels; ?>;height:<?php echo $smof_data["retina_logo_height"].$pixels; ?>;" data-max-width="<?php echo $smof_data["header_sticky_logo_max_width"]; ?>" class="retina_logo" /> <?php endif; ?>O lugar é realmente este. Analisando o código dá pra ver que ele pega a imagem que foi definida pelas configurações do tema.
O problema é que ele está fazendo a diminuição da mesma imagem, através de JavaScript. O bloco de código é sempre o mesmo, tanto para quando abrimos o site, quanto para quando rolamos a barra e aí ela fica fixa “stick nav”…
Precisamos encontrar o JS que modifica isso… Aí a coisa vai ficando mais complicada. Não manjo nada de JS, mas to tentando encontrar os arquivos utilizados pelo tema, só olhando aqui o codigo-fonte. Se eu conseguir algo eu te aviso.
Achei o JS que modifica. ( acho).
É o main.js
Dei uma busca nos códigos por sticky header e encontrei isso:(function( jQuery ) { "use strict"; // init sticky header jQuery.fn.init_sticky_header = function() { var sticky_mobile_menu_padding; var sticky_header_height = 65; var sticky_top = jQuery('.sticky-header').css('top'); var sticky_start = sticky_top.replace('px','') - 55; var logo = '.sticky-header .logo img.normal_logo'; var not_logo = '.sticky-header .logo img.retina_logo'; var orig_logo_height, orig_logo_width, logo_max_width, width_ratio, calc_width, calc_height, logo_height, logo_line_height, logo_width, logo_margin_top = 0; var anchor_scrolling = 0; jQuery('.sticky-header').css('top', sticky_start+'px'); jQuery('.init-sticky-header').waypoint(function(direction) { if(direction === "down") { // one page anchor page load scrolling var adminbar_height = jQuery('#wpadminbar').outerHeight(); var anchor = window.location.hash.toString(); if( anchor.length > 1 && jQuery(anchor).length && ! anchor_scrolling ) { jQuery('html, body').animate({ scrollTop: jQuery(anchor).offset().top - adminbar_height - 65 + 1 }, 350, 'easeInOutExpo'); anchor_scrolling = 1; } if(jQuery('#wpadminbar').length >= 1) { sticky_top = jQuery('#wpadminbar').outerHeight()+"px"; } jQuery('.sticky-header').show(); jQuery('.sticky-header').animate({ height: sticky_header_height + 3 + 'px', top: sticky_top }, 500 ); jQuery('.sticky-shadow').animate({ height: sticky_header_height + 'px', top: sticky_top }, 500 ); if( jQuery('#header .retina_logo').is(':visible')) { logo = '.sticky-header .logo img.retina_logo'; not_logo ='.sticky-header .logo img.normal_logo'; } else { logo = '.sticky-header .logo img.normal_logo'; not_logo = '.sticky-header .logo img.retina_logo'; } orig_logo_height = jQuery(logo).height(); orig_logo_width = jQuery(logo).width(); logo_max_width = jQuery(logo).data("max-width"); //IE8 quirks if (jQuery('.no-svg').length >= 1) { orig_logo_height = orig_logo_height + 4; orig_logo_width = orig_logo_width + 4; } calc_width = orig_logo_width; calc_height = orig_logo_height; if (logo_max_width > 0) { width_ratio = logo_max_width / orig_logo_width; calc_width = logo_max_width; calc_height = orig_logo_height * width_ratio; } if (calc_height > 55) { logo_height = "55px"; logo_line_height = "55px"; logo_width = 55 / orig_logo_height * orig_logo_width; logo_margin_top = "5px"; } else { logo_height = calc_height+"px"; logo_line_height = calc_height+"px"; logo_width = calc_width; logo_margin_top = (65 - calc_height) / 2; } sticky_mobile_menu_padding = logo_width+25; jQuery('body #header-sticky.sticky-header .sticky-shadow .mobile-nav-holder').css('padding-left', sticky_mobile_menu_padding+"px"); logo_width = logo_width+"px"; //IE8 quirks if (jQuery('.no-svg').length >= 1) { jQuery(logo).animate({ height: logo_height, 'line-height': logo_line_height, 'max-width': logo_width, 'margin-top': logo_margin_top }, 500 ); jQuery(not_logo).css('height', logo_height).css('line-height', logo_line_height).css('max-width', logo_width).css('margin-top', logo_margin_top); jQuery(logo).css('display', ''); } else { jQuery(logo).animate({ height: logo_height, 'line-height': logo_line_height, width: logo_width, 'margin-top': logo_margin_top }, 500 ); jQuery(not_logo).css('height', logo_height).css('line-height', logo_line_height).css('width', logo_width).css('margin-top', logo_margin_top); jQuery(logo).css('display', ''); } jQuery('.sticky-header #sticky-nav ul.menu > li > a').animate({ height: sticky_header_height + 'px', 'line-height': sticky_header_height + 'px' }, 500 ); jQuery('.sticky-header').addClass('sticky'); jQuery('#small-nav').css('visibility', 'hidden'); } else if(direction === "up") { jQuery('.sticky-header').css( 'height', '' ); jQuery('.sticky-shadow').css( 'height', '' ); jQuery('#header .retina_logo, #header-sticky .retina_logo').css( 'height', orig_logo_height ); jQuery('#header .retina_logo, #header-sticky .retina_logo').css( 'width', orig_logo_width ); jQuery('#header-sticky .retina_logo').css( 'margin-top', '' ); jQuery('#header .normal_logo, #header-sticky .normal_logo').css( 'height', '' ); jQuery('#header .normal_logo, #header-sticky .normal_logo').css( 'width', '' ); jQuery('#header-sticky .retina_logo').css( 'margin-top', '' ); jQuery(logo+','+not_logo).css( 'line-height', '' ); jQuery(logo+','+not_logo).css( 'padding-top', '' ); jQuery(logo+','+not_logo).css( 'max-width', '' ); jQuery(logo+','+not_logo).css( 'margin-top', '' ); jQuery('.sticky-header #sticky-nav ul.menu > li > a').css( 'height', '' ); jQuery('.sticky-header #sticky-nav ul.menu > li > a').css( 'line-height', '' ); jQuery('.sticky-header').removeClass( 'sticky' ); jQuery('.sticky-header').hide(); jQuery('#small-nav').css('visibility', 'visible'); jQuery('.sticky-header .mobile-nav-holder #mobile-nav').css( 'display', 'none' ); } }); }; // animate counter boxes jQuery.fn.fusion_box_counting = function() { var count_value = jQuery( this ).data( 'value' ); var count_direction = jQuery( this ).data( 'direction' ); if( count_direction == 'down' ) { jQuery(this).countTo( { from: count_value, to: 0, refreshInterval: 10, speed: 1000 } ); } else { jQuery(this).countTo( { from: 0, to: count_value, refreshInterval: 10, speed: 1000 } ); } };Acredito que seja ai q devo mudar. Talvez se eu enganar o template na parte de normal logo e alterar para o retina logo, pode ser q eu consiga. Pois o retina logo está em branco.
Bom, legal que encontrou algo… Pena eu não entender nada de JS pra continuar te ajudando mais. Mas vou ficar na torcida pra que outras pessoas vejam o teu problema aqui e possam te ajudar com esse JS… e também, claro, pra que você consiga arrumar, mesmo que sozinho…
Abração e boa sorte!
Magina, você mais que ajudou! Muito obrigado mesmo!
Malkalino, como conseguiu alterar o logo? Vi o seu site de teste, e fiquei interessado na parte que você deixou o sticky header centralizado e também conseguiu trocar a parte do logo.. Obrigado!
- O tópico ‘Sticky Menu e logo no tema Avada’ está fechado para novas respostas.