Hi there
Is there a possibility to change the white Logo on transparent navbar to a black Logo on the white navbar when scroling down?
Thank you very much for your help!
Hi Felix,
Thank you for reaching out to us. This would require custom scripting as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. Please add the following code in the Theme Options > JS:
(function($){
var original_logo_src = $(".x-navbar .x-brand.img img").attr("src");
$(window).on('scroll', function(){
if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
$('.x-brand img').attr('src', 'http://placehold.it/120x120');
} else {
$('.x-brand img').attr('src', original_logo_src);
}
});
})(jQuery);
Change http://placehold.it/120x120 with the URL of your black logo image.
Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!
Hi Nabeel
Thank you so much for your help. I realized, that I will have to do it the other way around; meaning not changing the Logowhen scroll down, instead changing the logo at the start and leaving the black logo all the time.
I did the same with the navigation color with CSS. I tryed to change also the logo with CSS but this time it is not working.
This is my CSS:
/* homepage Header */
@media(min-width: 979px) {
.home .masthead {
position:absolute;
width:100%;
}
@media (min-width: 979px) {
.x-navbar.x-navbar-fixed-top {
transition: all 1s ease;
background: #fff !important;
}
.home .x-navbar .desktop .x-nav > li > a {
color:#fff;
}
.home .x-navbar .desktop .x-nav > li > a:hover{
color:#fff;
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color:#000826;
}
.x-navbar.x-navbar-fixed-top {
top:-50px;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a, .x-navbar .mobile .x-nav li.current-menu-item > a {
color: #000826;
}
.home .x-navbar .desktop .x-brand.img > li > a {
content: url(’/wp-content/uploads/2020/01/Brand_ShowMyProject_transparent.png’) !important;
}
What did I do wrong?
Thank you very much for your help.
Hey Felix,
I’m sorry but we could not provide additional help for customizations. I hope you understand.
Please upgrade to Pro so you could create a custom header that will show a different bar with different logo or colors upon scrolling down.
Thanks.
Hi Christian
That sounds good! I have upgradet my X to Pro. I was working with a X-Child, which is now no longer activated. I found this notice on you website but I don’t really know what to do:
Updating Your Child Theme
If you are currently using a custom child theme, we’d strongly recommend testing any updates to Pro on a staging area beforehand while your custom code should work keep in mind the header and footer builder introduces new CSS classes and markup which means you may need to modify your child theme. In addition, you’ll need to change the template name in your child theme to pro. While you may wish to change the folder name, you only technically need to change the template name. This means the top of your style.css in your child theme should look something like this:
/*
Theme Name: Pro – Child Theme
Theme URI: http://theme.co/pro/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro
*/
I also would like to register the new Pro License Code, like I always did with X. Where do I have to enter the license code?
Can you please help me!
Hi there
I now have installed and activated the Pro Child Theme. Everything works well. Is this all I have to do? Can I now delete Cornerstone Builder and X-Theme and X-Child?
I also managed to build the menu I wanted with Pro on the Home-Page. As I use “Renew” Template, my main menu on all Pages has underlines to highlight the active status and the mouseover. How can I achieve this underline for mouseover also on my new menu at the Home-Page?
There is also no more mobile burger menu with the new menu on the Home-Page.
Thank you very much for your help.
Hi Felix,
If you don’t have any customization on the X-Child (custom CSS, custom functions, custom template, etc), yes that’s all you have to do, if you have customization on the X-Child then you need to move those to pro-child. If not then you can safely delete the X and X child theme.
Please inspect your Navigation inline, then under Top Links tab, turn On the Primary Particle option and configure it where you see it fits.
Yeah with regards to the menu, you need to hide the Navigation Inline menu on the mobile view because it’s not ideal. You can hide an element on mobile using the Hide During Breakpoint feature. Then you need to put either a Navigation Modal or Navigation Layered element in place of Navigation Inline. As the contrary of the Navigation Inline, you need to hide the Navigation Modal or Navigation Layered element on desktop also using the Hide During Breakpoint. So with this, you will have a switching menu on mobile and desktop.
Thanks,
Hi Friech
Thank you very much for your great help! As I want my second navigation bar to be a little shorter than the transparent one, you will see both navigation bars after a page reload. Is it possible to hide the transparent bar when the shorter white one is displayed?
Thanks for your advice.
Hello Felix,
You can hide the bar initially. There is an option for that in the bar settings. You will have to enable the Sticky bar option first.
Hope this helps.
Hi RueNel
Thank you very much for your reply. I have already set the white bar to hide initially, so it shows only when scrolling down. If I set the transparent bar to hide initially too, then I have no bar at all at the beginning and both will appear when scrolling.
I would like to only hide the transparent bar when the shorter white one is displayed? Is this possible?
Thank you very much.
Hello Felix,
It seems that you already resolved your issue. When I checked your site, I am already seeing this:
Transparent bar, white bar hidden:
Transparent bar hidden, white bar displays:
If you need anything else we can help you with, don’t hesitate to open another thread.
Hi RueNel
Thank you very much for checking the website. The Problem is, because the white bar is a little shorter than he transparent one, if I reload the page or the position of scrolling is not exactly at the top of the page, it can look like this:
For this reason, it would be great, if it would be possible to hide the transparent bar, if the white one is showing.
Or is it possible to make both bars the same height and let them shrink a little bit in height, when scrolling down?
Thank you very much for you help.
Hey Felix,
Regarding your question
Technically, it’s not possible. But, you could make the white bar appear like it will show after the transparent one goes out of the screen by delaying its appearance. That delay option is the Trigger Offset. Try setting it to the same height as your transparent bar.
Hope that helps.
Hi Christian
Thank you very much for your great help! That is exactly what I was looking for.
Thanks again
You’re welcome, Felix. Glad that helped.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.