Hi,
I want to change the font color of my logo and navigation bar (main and submenu) into white on my homepage only and when scrolling down it should change to the default colouring for both my logo and navigation bar (see picture).
Now before scrolling (I want the color to be white instead of the default dark grey)
After scrolling down (default color is good)
Please your help and thanks in advance!
Hey Jerrel,
Regretfully, this would require writing custom code and it’s not just a small piece of code as you will need to reverse the default colors of the Navbar elements.
I see you’re using Pro. Please use the Header Builder instead. You just need to set up 2 bars. The 1st bar is the transparent one and the 2nd bar should be the one with white background and sticky. You won’t need any custom code to achieve this in Pro.
Hope that helps.
Hi, thanks for your reply. I have to admit that I’m not that technical 
.
I managed to add the 2 bars (transparent and white), but the result is still a white bar. Ultimately I want to have one bar on my homepage which is transparant + has a white font if not scrolled so that the home page shows the picture fully on the slider (as the picture I shared in earlier post). If I scroll down then the bar and font color should be the same as the other pages.
For some reason the position of the bar(s) differ from the other pages; I want to have this new bar on the exact same position as displayed on the other pages. Now it’s on the left side of the homepage.
And I also need your help on how to add the logo text (Resida Consultancy) next to the bar(s). Please your advice.
Hello Jerrel,
Thanks for updating in!
Please position your first bar to “Absolute”, turn off the “Sticky Bar” option and make sure that the content length is 100%. You may add content maximum width if it applies to your site.
For your second bar, position it as “Relative”, turn OFF the “Sticky Bar” option and make sure that you hide it initially.
If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288
Regards.
Hi, I managed to add the bars according to your instructions :-). Unfortunately this new navigation bar differs (font type, font size and position on page) from the other navigation bar which is visible by accessing the other pages. Can you please help me to make the necessary adjustments so that the new navigation bar has the exact same look and feel as the other one? Next to that I also want to add the logo text “Resida Consultancy” just before the navigation bar as you can also see it on the other pages. And last but not least, the new navigation bar isn’t responsive and I can’t find the option to enable this.
This is how I want it (position of navigation bar, font type of navigation bar and logo text)
Now it looks like this (different font type and position of navigation bar and missing logo text)
Hi Jerrel,
Thank you for the credentials, I understand that this is hard for you to use the header builder, so I made you a Home page header for your reference.
If you have time, please take a moment to read this documentation
Header and Footer Builder Overview
Cheers!
Great and many thanks for helping me out! Just one more thing I need your help with.
Can you please help me with the behaviour of of the “navigation collapsed” element in responsive mode?
How I would like to see this (shown on all pages except from the front page)
How it is displayed on the front page now. Different behaviour when icon is clicked and the icon isn’t visible before and after scrolling. Next to that the top level menu items in this collapsed functionality should be clickable, meaning linked to a page, just like it’s possible with the other navigation collapsed functionality (first screenshot).
Hi Jerrel,
Please inspect your Navigation Collapse, and make sure the Graphic Setup is turn On and you set the right Color
Please inspect your Navigation Collapse, and set the Sub Menu Trigger to Sub Indicator
Hope it helps,
Cheers!
Thanks again!
Can you please help me with the behaviour of the navigation collapsed functionality? I want it to have the exact same behaviour as the one enabled to the other pages in mobile mode.
I can’t find the option to have this configured in the header builder functionality.
Can you also please change the burger icon on the homepage into the one you can see in below screenshot?
Below you can see what happens if the burger icon is clicked in mobile mode on other pages (not home page). The overall menu is expanding downwards and it ‘presses’ the entire page downwards as well. This is not the case on the homepage. I want to have that exact same behaviour on the homepage (see below screenshot as well).
Behaviour burger icon on homepage if clicked: menu is expanding to the left instead of down. Font of menu items differs from the font as shown above. Rest of page isn’t accessible/readable.
Hi Jerrel,
I understand what you’re trying to do, but that is not possible.
This is a standard header with a standard mobile menu.
And the header on your homepage as you already know is built in the Header Builder, there are couple of Mobile Menu element options on the Header Builder like the Navigation Modal, Navigation Layered, and the current one that you have on homepage is Navigation Collapsed, unfortunately, standard mobile menu is not one of the options. That means you can not bring that standard mobile menu to the homepage.
You can configure the font-family, color, size, and hamburger icon of the navigation element on the header builder though. Please check this documentation.
Thanks,
I changed by theme back to X instead of Pro as I prefer the menu structure of X.
Can you please help me change the font color of the navbar top menu items from the default color into white before scrolling? I managed to change the default color of x-brand into white but not for the Navbar.
Please find the code below.
jQuery(document).ready(function($){
$(’.home.x-navbar-fixed-top-active .x-navbar-wrap’).css(‘height’, 0);
$(’.home .x-navbar’).css({‘color’:’#fff’,‘background-color’: ‘transparent’,‘box-shadow’: ‘none’, ‘border-width’ : 0});
$(’.home .x-brand’).css({‘color’:’#fff’});
$(window).scroll(function(){
if ($(this).scrollTop() > 200 || $(’.x-nav-wrap.mobile’).hasClass(‘in’) ) {
$(’.home .x-navbar-fixed-top’).css({‘background-color’: ‘#fff’, ‘box-shadow’: ‘0 0.15em 0.35em 0 rgba(0,0,0,0.135);’, ‘border-width’ : ‘1px’});
$(’.home .x-brand’).css({‘color’:’#000’});
} else {
$(’.home .x-navbar-fixed-top’).css({‘background-color’: ‘transparent’, ‘box-shadow’: ‘none’, ‘border-width’ : 0});
$(’.home .x-brand’).css({‘color’:’#fff’});
}
});
});
Hello Jerrel,
Adding a custom JS code will just give you complication. I would highly recommend that you use a custom css instead. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.home .x-navbar:not(.x-navbar-fixed-top) .x-brand.text {
color: white;
}
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > li > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .sub-menu a, .x-navbar .mobile .x-nav li > a {
color: white;
}
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > li > a:hover,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > .x-active > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > .current-menu-item > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .sub-menu a:hover,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .sub-menu .x-active > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .sub-menu .current-menu-item > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav .x-megamenu > .sub-menu > li > a,
.home .x-navbar:not(.x-navbar-fixed-top) .mobile .x-nav li > a:hover,
.home .x-navbar:not(.x-navbar-fixed-top) .mobile .x-nav .x-active > a,
.home .x-navbar:not(.x-navbar-fixed-top) .mobile .x-nav .current-menu-item > a {
color: red !important;
}
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > li > a:hover,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > .x-active > a,
.home .x-navbar:not(.x-navbar-fixed-top) .desktop .x-nav > .current-menu-item > a {
box-shadow: inset 0 4px 0 0 red;
}
Feel free to change the colors as it applies to your site when needed.
Many thanks!!
I removed the Global JS code as requested.
Almost there…please your help with the following:
Navbar
When loading my homepage the Navbar isn’t transparant anymore (it was possible with the Global JS code I shared earlier)
When loading my homepage the Navbar text isn’t visible unless I scroll down. If I scroll to the top, the Navbar text isn’t visible again
When loading my homepage and hovering over the Navbar items, the sub menu items aren’t visible (dominant white background) unless you scroll over the items
In mobile mode (when hamburger icon is visible) the Navbar content isn’t visible on all pages. You can only see the active page if the hamburger icon is clicked and the other ‘white’ items they become readable if you hover over them.
Scrolltop function
Brand text
Hello Jerrel,
If that is the case, I would recommend that you use the custom CSS together with your custom JS and see how it goes.
Please put back the custom JS while retaining the custom CSS as well.
Kindly let us know how it goes.
Hi,
Looks much better with the JS 
!
Can you please help me with the text color of the Navbar in mobile mode on my homepage before scrolling and when scrolling back to top? I want to change this into white and I can’t find the right code to make this happen.
That’s the only thing left.
Thanks in advance!
Hello Jerrel,
Please update your JS code and use this instead:
jQuery(document).ready(function($){
$('.home.x-navbar-fixed-top-active .x-navbar-wrap').css('height', 0);
$('.home .x-navbar').css({'background-color': 'transparent','box-shadow': 'none', 'border-width' : 0});
$(window).scroll(function(){
if ($(this).scrollTop() > 200) {
$('.home .x-navbar-fixed-top').css({'background-color': '#fff', 'box-shadow': '0 0.15em 0.35em 0 rgba(0,0,0,0.135);', 'border-width' : '1px'});
} else {
$('.home .x-navbar-fixed-top').css({'background-color': 'transparent', 'box-shadow': 'none', 'border-width' : 0});
}
});
});
Hope this helps. Please let us know how it goes.
Hi,
I just applied the new js code and now the menu structure of all Pages (except from homepage) aren’t readable in mobile mode.
Please your help to make the menu (Navbar) in mobile mode visible for the other pages as well.
Thanks in advance!
Hi Jerrel,
I would just like to make it clear that providing custom codes or fixes for features that are not natively supported with X goes beyond the scope of our support. It is inevitable sometimes that making changes in the code will have an effect on the other parts of your website.
Though please try adding this CSS to your site:
@media (max-width: 480px) {
body:not(.home) .x-navbar .mobile .x-nav li > a {
color: #000 !important;
}
}
Since this thread is getting longer and new request is building up after a fix, it would be best to get in touch with a developer to work on it and have all the items you addressed in case you require more changes.
Hope this helps.
This sure helps, many thanks!
I managed to get the mobile navbar functioning as I want it
Perfect! Glad to hear you got it sorted, Jerrel. 