Ethos transparent Navbar and full hight heroimage

[switteveen]

Hi there support,

On my site and specific page https://mountainrun.nl/mtr-blog/

I have included the JS and CSS for a transparent navbar from your topic: https://xthemetips.com/transparent-fixed-header/129/

The issue is that the page extents on the top above the first section with the background heroimage.

Do you know how to make the first section really appear on top?

Second issue is that my site, after the adjustments does not scroll fluently, I don’t have a clue?

Thank you

[christian]

Hey Sander,

Thanks for writing in. To clarify, the article you posted is not ours. It is also quite old and might not be applicable to the latest version of X anymore. Please remove the codes you copied as it is also not part of our support service to provide a fix or enhancement to third party codes. That code might also be the reason or the cause of your second issue.

Also, ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

To achieve a fixed transparent header for your page, please follow the setup in this guide. If you find it fast, slow the playback down or pause and play to follow along with the setup. Also note that it also requires a bit of custom coding so fixing issues arising from the use of it and providing enhancements would be outside the scope of our support. Below is the CSS code used in that guide. It is to be added in the page’s Content CSS. Also, the page template used in that guide is Blank No Container | Header Footer.

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

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0;
}

.x-navbar .desktop .x-nav>li:first-child>a,
.x-navbar .desktop .x-nav>li>a {
    border: 0
}

Thanks.

[rad]

Hi @switteveen,

Thanks for posting in.

Unfortunately, we can’t provide customization especially if it’s not for us. You may contact the author of that code to see what’s going on, I’m not sure to what version it’s compatible or what setup. Xthemetips.com is not our site and not managed by us.

Thanks!