Hi there,
I’m looking for some help in figuring out how to make my top and nav bar transparent for the homepage only. I’d like them to be transparent when the page loads, then as someone scrolls down on the page have the solid white background come back for the top and nav bar.
Any help with code would be appreciated!
Thanks!!
Hi There,
Could you please provide us with your website URL so we can take a closer look?
Thanks.
Hi,
To achieve that, you can add this in Custom CSS
@media(min-width: 980px) {
.home .masthead {
position:absolute;
width:100%;
}
.home .x-topbar,
.home .x-navbar {
background-color:transparent;
}
.home .x-navbar .desktop .x-nav > li > a {
color:#fff;
}
.home .x-topbar,
.home .x-topbar a {
color:#fff;
}
.home .x-navbar .desktop .x-nav > li > a:hover,
.home .x-navbar .desktop .x-nav > .current-menu-item > a,
{
color: #4682b4 !important;
}
.home .x-topbar.x-topbar-fixed-top,
.home .x-navbar.x-navbar-fixed-top {
background:#fff;
}
.home .x-topbar.x-topbar-fixed-top,
.home .x-topbar.x-topbar-fixed-top a {
color:#000;
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color:#000;
}
.home .x-navbar.x-navbar-fixed-top .x-navbar-inner {
z-index: 99999;
top: 55px;
position: fixed;
clear: both;
width: 100%;
background-color: #fff;
}
}
Then add this in Custom JS
jQuery(function($){
$(window).scroll(function(){
if ( $(this).scrollTop() ==0) {
$('.x-navbar').removeClass('x-navbar-fixed-top');
}
if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
$('.x-topbar').addClass('x-topbar-fixed-top');
}else {
$('.x-topbar').removeClass('x-topbar-fixed-top');
}
});
});
Hope that helps.
@paul.r you rock sir! Thank you for the help! I put the code in here: photonomadsdev.com and everything works great on the homepage! I did run into problems with the nav bar disappearing when you scroll down on other pages that aren’t the homepage though, could you provide a fix for that please?
One other issue that I’d like to explore if possible:
For the particular photo I have up there right now the logo staying blue on initial load works just fine. I can see situations coming up where I’d want the logo to be white on initial load (where the top & nav bar are transparent) but then switch back to blue when you scroll and the background becomes white. Is it possible to do this?
Thanks!
Dave
Hi Dave,
As you can see, this requires custom coding. Almost everything is technically possible with custom coding and we love to provide guidance but this would be getting into custom development which is outside the scope of our support.
There are two ways you can proceed next.
1.) You switch to our Pro theme. With that, you don’t need custom code to achieve a transparent nav to solid bar on your home page only because you can assign a header per page and the effect is achievable out of the box.
Using Pro, it is also possible to show a different photo because you can setup different bars and hide them if needed.
2.) You hire a developer. We do have an in-house custom development team that offer paid services, who may be able to assist. They can be contacted at pinnacle@theme.co if this is of interest to you.
Thank you for your understanding.
@christian_y, @paul.r
I appreciate the help here. I have a few sites with X on it, I upgraded one of my sites to Pro so I can figure out how to achieve this look that we were close on with Paul’s previous coding suggestions.
The site I have Pro installed on now is davidgaiz.com. I’ve built a couple of headers but haven’t attached them to any pages yet. How do I go about using these different header versions on the homepage only to achieve the transparent look on load and the opaque look after scrolling down? I’m guessing the coding is going to be a little different here from what @paul.r posted above so I haven’t entered any of that code in yet.
Thanks for the help!
Dave
Hi,
$( '.x-topbar' ).prependTo('.x-navbar');
$('.x-navbar-wrap')css('height', '135px');
This is breaking the fixed navbar layout.
See screenshot.
Please review link below
You need to set-up your bar initial position to Absolute
/* homepage Header */
@media(min-width: 980px) {
.home .masthead {
position:absolute;
width:100%;
}
.home .x-topbar,
.home .x-navbar {
transition: all 0.5s ease;
background-color:transparent;
}
.home .x-navbar .desktop .x-nav > li > a {
color:#fff;
}
.home .x-topbar,
.home .x-topbar a,
.home .x-topbar font {
color:#fff !important;
}
.home .x-navbar .desktop .x-nav > li > a:hover,
.home .x-navbar .desktop .x-nav > .current-menu-item > a,
{
color: #4682b4 !important;
}
.home .x-topbar.x-topbar-fixed-top,
.home .x-navbar.x-navbar-fixed-top {
background:#fff;
}
.home .x-topbar.x-topbar-fixed-top,
.home .x-topbar.x-topbar-fixed-top a,
.home .x-topbar.x-topbar-fixed-top a font{
color:#000 !important;
}
.home .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
color:#000;
}
.home .x-topbar.x-topbar-fixed-top {
position:fixed;
top:0;
width:100%;
}
.home .x-navbar.x-navbar-fixed-top {
top:55px;
}
.home.admin-bar .x-topbar.x-topbar-fixed-top {
top:32px;
}
.home.admin-bar .x-navbar.x-navbar-fixed-top {
top:87px;
}
}
Then add this in Custom JS
/* OPaque on scroll */
jQuery(function($){
$(window).scroll(function(){
if ( $(this).scrollTop() ==0) {
$('.x-navbar').removeClass('x-navbar-fixed-top');
}
if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
$('.x-topbar').addClass('x-topbar-fixed-top');
}else {
$('.x-topbar').removeClass('x-topbar-fixed-top');
}
});
});
Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer.
Thanks
Hi @paul.r
Thanks again for all the help. I got it close - davidgaiz.com. I’m a little confused on a few things here:
-Any suggestions on how to get the slider rev slide to fill all the way to the top behind the header on the home page?
-For the homepage header, why does the main nav bar come down when you scroll instead of just being anchored in place up top?
Ultimately I’m just trying to have the header fixed to the top of the page. I’m trying to have the header background be transparent with my logo and text in white so it looks nice on top of the hero image.
When you scroll past the hero image/video, that is when I’d like the header to switch to a solid background so it’s easy to read with the rest of the page. In a perfect world when the header switches during scroll from a transparent background to a solid background (white) I’d love the colors of the text and logo to be able to switch from white to black (since the background color of the header should be white). I thought this is what was possible out of the box with Pro, is this what you’re saying requires custom development?
Is there anyway to have multiple bars built within one header, the first set of bars have my transparent backgrounds with white logo and white text. Then the 2nd set of bars have a white background with black logo and black text. Then somehow hide the 2nd set of bars until the scrolling hits a certain point on the page then reveal the 2nd set and hide the first set? Hope that makes sense 
Thanks for the help,
Dave
Hi There,
Since you switched to PRO you can remove all the provided CSS and JS.
You will create your header using the header builder.
Considering you just want this effect on your home page, You will duplicate this header so you create a second header which you will assign to your home page.
You will duplicate your header bar, and make the top one transaprent, you will also set the position to absolute so it stays over the slider.
The second bar you will set to be sticky and have a delayed reveal. This recreates the general effect minus the transition of the colors all happening inline.
Hope that helps!
Hi @Joao,
Thanks for the help, it’s greatly appreciated. Can you provide a little more help here?
-From what I can see I do have the position set to absolute but the positioning still seems off.
-I think I’m following what you’re saying in terms of duplicating the bar, then making one transparent with an absolute position setting and the 2nd one with a solid background. What I’m not sure how to do is setup a delayed reveal on the 2nd bar. Can you provide additional insight there?
I attached login info here incase you need to take a look.
Thanks!
Dave
Hi There,
I forgot to mention you need also to click hide initially.
I have adjusted your home page header accordingly.
Hope it helps
I’m trying to follow this as well. For some reason the navbar isn’t lining up with the top of the screen Any idea why?
Here is the URL : http://staging.deafening-current.flywheelsites.com/
flywheel
childlike-sleet
Hi @Joao,
Perfect! Thank you for the help, it looks like it’s working perfectly now for most versions of the site. There are a couple things I’m still struggling with though:
-I copied part of this header and I’m using it for all of the other pages on the site. When I scroll down it kinda jumps or glitches a little to keep the header stuck and at the top. Anyway to fix this and just have it be anchored and not glitch at all while scrolling? (This is for everything but the homepage).
-For smaller device sizes, the collapsed navigation menu is shown with the 3 dots and I can’t figure out how to change the color of those. I’ve dug through all the menus, if I missed it somewhere there can you point me in the right direction? Looking for this to be white.
-On my phone the header looks fine at first on the homepage, but when I scroll the solid background version shows up but isn’t at the top of the page, it’s part of the way down. Any advice on how to fix this?
-With any of these headers I create in pro, can I save them as a template and then import that template to use on some of my other sites?
Thanks!
Dave
Hi there,
Thank you for your message. We totally understand that you have the same issue here which the information here can be helpful, but if there is additional help needed by us kindly open up a new thread with the information of your website to be able to focus on your issue and serve you better.
It will help us to give you quality answers and avoids the confusion for a thread. For more information about how to get support kindly read this article:
Thank you for your understanding and cooperation.
Hi there,
I am glad that you have managed to achieve somewhat you had in your mind till now. To avoid confusion and be able to give you better quality help I suggest that you open up new threads for additional questions. That way we will be able to focus on each case and give you proper information.
You can open up as many threads as you like, this will really help us to give you quicker and better answers. For example, I had to read from top to bottom of this thread to only find out you already achieved what you were looking for in the original post.
Also, it will be helpful for the other customers to have a thread for each question for the searching point of view.
I will try to answer the first question now:
For the version of the header which shows on the other pages, you do not need the absolute position. You just make the position relative and the bar to be sticky from the top. Do not add any delay and you will have no problem.
Looking forward to the additional threads to focus on.
Thank you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.