Transparent Menu and Blog Issues

[kcreative]

Hi guys,

Been working on having a transparent menu and a solid color on scroll, but that seems to interfere with the Blog page and the articles: https://prnt.sc/mvrj0r

Have followed these threads: https://www.jadealombro.com/x-theme-transparent-fixed-top-header-solid-background-on-scroll/ and https://theme.co/apex/forum/t/transparent-fixed-navbar-with-opaque-header-on-scroll-issue-on-mobile/28797

And have this code so far:

* MENU */

/*Transparent Main Menu*/
.x-navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
    width: 100%;
    padding-left: 10px;
  	padding-right: 10px;
  	border-bottom: 0;
    box-shadow: none;
}

/*Sticky Menu fix*/
.masthead {
  position: absolute;
  width: 100%;  
}

.x-navbar-fixed-top {
  background-color: #fff !important;
  position: fixed;
  -webkit-box-shadow: 0 5px 6px -6px black;
	   -moz-box-shadow: 0 5px 6px -6px black;
	        box-shadow: 0 5px 6px -6px black;
}

@media only screen and (max-width: 978px) {
  .x-navbar {
  	background-color: #fff !important;
    -webkit-box-shadow: 0 5px 6px -6px black;
	   -moz-box-shadow: 0 5px 6px -6px black;
	        box-shadow: 0 5px 6px -6px black;
	}
}

Any ideas how to fix the Blog issues?

Thank you!

[christian]

Hey @kcreative,

The code will not only interfere with your blog page but also all of the pages in your site where you don’t need the navbar overlay effect. This is why in case where you need a navbar overlay effect for certain pages only, I recommend to upgrade to Pro so you could assign different header designs or setups (especially relative and absolute bars) to specific pages.

For X, you will need to add that custom code to the Content CSS of each page you need an overlay effect.

Otherwise, you need to add the page class before all your selectors in the code especially the .masthead. For example, if you need the navbar overlay effect only in the home page, update the selector to .home .masthead. If you need to apply the CSS to multiple pages, you’ll need to update the selector like:

.home .masthead,
.page-id-1851 .masthead,
.page-id-1852 .masthead {
  position: absolute;
  width: 100%;  
}

That is similar to what your example site is doing.

Please note that we do not have support for customization. This setup is not a native feature of X. One of the reasons why Pro was created is to achieve this setup easily so I’d strongly recommend that you upgrade to Pro.

If you wish to continue with using the custom code, please consult with a third party developer.

Thank you for understanding.

[kcreative]

Thank you so much for your help, that was really useful!

[paul.r]

You’re welcome!