Stick Nav "centered logo and navigation" (Header_10)

- 9 years, 2 months ago Selenus
 Participant
 
 Expired
 
 Hi,
 
 Can I have the sticky nav for the ”centered logo and navigation” ? I only have the logo and not the menu sticky.
 
 Best wishes!
- 9 years, 2 months ago Ruco
 Keymaster
 Hello,
 
 This isn’t possible by default. Please edit eh file functions-tower.php.
 
 Find the lines:
 
 function codeless_header_main_navigation_style(){ global $cl_redata; $header_class = $cl_redata['header_style']; if($header_class == 'header_1' || $header_class == 'header_2' || $header_class == 'header_3' || $header_class == 'header_4' || $header_class == 'header_7' || $header_class == 'header_8' || $header_class == 'header_9')
 
 and replace with:
 
 function codeless_header_main_navigation_style(){ global $cl_redata; $header_class = $cl_redata['header_style']; if($header_class == 'header_1' || $header_class == 'header_2' || $header_class == 'header_3' || $header_class == 'header_4' || $header_class == 'header_7' || $header_class == 'header_8' || $header_class == 'header_9' || $header_class == 'header_10')
 
 Best regards!
- 9 years, 2 months ago Selenus
 Participant
 
 Expired
 
 Sorry Ruco. I think that code is for Tower theme, but I’m talking about specular theme. Could you write me the custom code for that?
 
 Thanks for your support,
 
 D.
- 9 years, 2 months ago Mirela
 Participant
 
 Hello,
 
 Sorry for the speedy mistake.
 Please go to file header.php and find this line:
 <?php if($header_class == 'header_1' || $header_class == 'header_2' || $header_class == 'header_3' || $header_class == 'header_4' || $header_class == 'header_7' || $header_class == 'header_8' || $header_class == 'header_9'): ?>
 
 and replace with this:
 <?php if($header_class == 'header_1' || $header_class == 'header_2' || $header_class == 'header_3' || $header_class == 'header_4' || $header_class == 'header_7' || $header_class == 'header_8' || $header_class == 'header_9' || $header_class == 'header_10'): ?>
 
 Now add this code into your custom css box:
 .sticky_header nav { margin-top: 62px !important;}
 Let us know.
 
 Best regards!
- 9 years, 2 months ago Selenus
 Participant
 
 Expired
 
 Hi Mihaila,
 
 It works but now the menu navigation is duplicated. And not centered in sticky navy.
 
 You can see my test here: https://sireraysaval.selenus.es/
 
 Waiting for your response.
 
 Best wishes!
 
 D.
- 9 years, 2 months ago Ruco
 Keymaster
 Hello,
 
 Sorry for the inconvenience.
 Please remove all the changes we provided you in previous replies. Edit the file ‘/js/main.js’
 
 Find the lines:
 
 function codelessStickyNav(){ "use strict"; var opened = false; var position = $('.header_wrapper').css('position'); var bool_test = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); $(window).scroll(function(){ var top = $(this).scrollTop(); if(top > stickyNavTop && !opened){ $('body').addClass('sticky_header'); setTimeout(function(){ if($('.header_wrapper').hasClass('background--dark')){ $('.header_wrapper').removeClass('background--dark'); bool_test = true; } $('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open'); opened = true; }, 200); Replace with:
 
 function codelessStickyNav(){ "use strict"; var opened = false; var position = $('.header_wrapper').css('position'); var bool_test = false; $('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden'); $(window).scroll(function(){ var top = $(this).scrollTop(); if(top > stickyNavTop && !opened){ $('body').addClass('sticky_header'); setTimeout(function(){ if($('.header_wrapper').hasClass('background--dark')){ $('.header_wrapper').removeClass('background--dark'); bool_test = true; } $('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open'); $('.full_nav_menu').css('position', 'fixed').css('visibility', 'visible').addClass('open'); opened = true; }, 200);
 
 I can do it for you, just provide me the ftp credentials ( I can't login with the ones you provided).
 
 Best regards!
- 9 years, 1 month ago Selenus
 Participant
 
 Expired
 
 WOW! Now it’s works fine. Important the css style .sticky_header nav { margin-top: 62px !important;} (It does not work without it).
 
 Just one thing to be perfect: sticky nav background is not white transparent (like logo background area).Can you check it, please?
 
 Best wishes!
 
 D.
- 9 years, 1 month ago Deniz
 Participant
 
 Expired
 
 I changed it as described . Unfortunately it does not work.
- 9 years, 1 month ago Mirela
 Participant
 Hello,
 
 @Selenus,
 Please add this code into your custom css box:
 
 .header_10 .full_nav_menu .container { background-color: rgba(255,255,255,0.8) !important; }
 
 Result.
 
 @Deniz,
 You may have made some mistake while pasting it. Send us your ftp and we can give it a closer look.
 PS: Please open up a new topic and reference to this one. If you send the credentials in this topic, the author will be able to see them.
 
 Best regards!
- 9 years, 1 month ago Selenus
 Participant
 
 Expired
 
 That’s great, Mihaila. Thanks very much. Clearly there are two different background layers: logo and main menu. But the menu white layer is not full width, so the result is not cool. You can see it here:
 
 Could you fix it?I promise not to bother you with this topic ;)
 
 Best wishes!
- 9 years, 1 month ago Mirela
 Participant
 Hello,
 
 Sorry about that. The test i made did not display two layers but perhaps i miss showing you another step.
 Please edit code to this:
 
 .sticky_header header#header { background-color: rgba(255, 255, 255, 0.02) !important; } .header_10 .full_nav_menu { background-color: rgba(255,255,255,0.8) !important; }
 
 Result. Let us know.
 
 Best regards!
- 9 years, 1 month ago Selenus
 Participant
 
 Expired
 
 Absolulty perfect!
 
 Thanks very much. Excelent support!
 
 Best wishes,
 D.