[Rue NelModerator]

Hello There,

Thanks for updating this thread! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[MaParticipant]

Hi again,

Everything works fine, but I noticed that when I scroll down, the navbar turns to white from transparent and remains white, even if you scroll up again. Previously it was transparent, via code you gave me. Am I missing something? Is there a way to keep it transparent when you scroll up to the slider again, but keep it white when its scrolling down? Thank you!!^^

This is the code:

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 0;
}

body.x-navbar {
    background-color: transparent;
    border:0;
}

.page-id-2811.x-navbar-fixed-top-active .masthead {
    position: absolute;
    top: 0;
    width: 100%;
}

.page-id-2811.x-navbar-fixed-top-active .x-navbar {
    background-color: transparent;
	border-bottom:none;
}

.x-logobar {
	background-color:transparent;
}

.page-id-2811.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
	background-color:#ffffff;
	border-bottom:1px solid #ccc;
}

.page-id-2811.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
background-color:#ffffff;
border-bottom:1px solid #ccc;
}

I believe the code I bolded is creating the navbar to turn white. So when I made it transparent, then the navbar would always be transparent. is there a way a way to keep the navbar transparent only at the top slider/picture, but when hitting something else turn it to white? Is this possible using IDs for each section?

Thanks!

[MaParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

The problem is, the class x-navbar-fixed-top is not being removed when you scroll back up, so it remains white.

To fix this, you can add this under Custom > Javascript in the Customizer.

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop()<=0) {
              $('.x-navbar').removeClass("x-navbar-fixed-top");
      }
    });
});

Hope that helps.

[MaParticipant]

Wow that worked right away! Thank you! Is it possible to remove it when the navbar touches a section? For example if I made the ID for the top photo “topphoto” is this possible? Because right now it just disappears when the user goes all the way to the top, but still remains on the top photo. I hope that’s clear. Thank you so much!! ^^

[MaParticipant]

I just asked you another question (in this post), never mind I figured it out, but the post right before this one I still need help. 🙂

[ZeshanMember]

We’ve helped you with more a general code in our last reply. There could be many possibilities to improve the code to achieve a certain functionality, but as this is a custom development, further customizations from here is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. You may contact our trusted partners: https://community.theme.co//custom-development/. Thanks for understanding. Take care!

[FlywebMediaParticipant]

There is a small gap between the top navbar and the top of the page that doesnt show the navbar. I included:

.home.x-navbar-fixed-top-active .masthead {
position: absolute !important;
top: 0% !important;
width: 100%;
}

It sticks to the top in chrome but not firefox or safari. Any advice? Do i need to add in some webkits? Let me know thanks.

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[wsmaniac01Participant]

Hi guys,

First of all, thanks for this thread and the great support. I have used Philip’s original code which works great for a fixed nav bar. I have tried to alter this for a static nav bar by changing the fixed CSS code to static, however this does not work, I just end up with a white nav bar.

Any ideas?

Thanks

[ZeshanMember]

Hi @wsmania,

Thanks for writing in!

Kindly open a separate thread with regard to the issue you’re facing and provide us with your URL so we can take a closer look to your site. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Elliott BParticipant]

I can’t figure out what I am doing wrong on my site? I attached the code mentioned above and I am not getting the same results. (http://roseaerospace.net/) Can someone help me with this issue?

[JadeModerator]

Hi Elliot,

Thanks for writing in. As this is a very long thread with different requests from other users, I am not certain what you are trying to do to your site. Would you mind clarifying more so that we could assist you further? Also kindly open a new thread for it so that the response will be specific to your need and to avoid confusion. Thank you.

[mkaniranParticipant]

Hello,

Thank you so much for sharing.
As you mentioned and shared above, I already added to Custom >> CSS as follows:

/* Home – header transparent for fullscreen bg image */
.home.x-navbar-fixed-top-active .masthead {
position: absolute;
top: 0;
width: 100%;
}

.home.x-navbar-fixed-top-active .x-navbar {
background-color: transparent;
border-bottom:none;
}

.x-logobar {
background-color:transparent;
}

.home.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
background-color:#ffffff;
border-bottom:1px solid #ccc;
}

Every thing is fine, except my Navbar. Plesae see the attachment and advice how to fix that problem.

thank you

[mkaniranParticipant]

Except the problem above (that how to move the Navbar to the top of the home page in full scrren background format – see the attachment above), I also need your help to know how to add a menu below the full screen page. Please advice how to fix both problems

I appreciate

[Author]

Posts