Docs

[[email protected]]

Hello: this is my site explorington.com

I have two requests:
I would like to have an image as a background for the header space on my site, the one that opens when the “+” symbol on the right of my site is pushed.

Second:
I have my navbar set to fixed, and postslider installed. I would like the navbar to be translucent on overtop my post slider and then when the site is scrolled through I would like the navbar to become opaque and smaller. Further I would like the postslider to dynamically shutter away.

I have a sample of what I’m looking for: http://themenectar.com/demo/salient-frostwave/home-blog/

[Rupok]

Hi there,

Thanks for writing in!

#1. You can add this under Custom > CSS in the Customizer.

.x-widgetbar {
  background: rgba(0, 0, 0, 0) url("//explorington.com/wp-content/uploads/2016/03/MountRussellScreen-6225.jpg") no-repeat scroll center center / cover ;
}

Let’s change the image URL with an appropriate image.

#2. You will find lot of threads for this like this one – https://community.theme.co/forums/topic/transparent-menu-then-activating-solid-color-on-scroll/#post-878043

Cheers!

[[email protected]]

Hello,
thank you for your help. I have had some success but I’m still stuck with a few things.

This is the code I used:

.white{
background-color:#004220 !important;
height: 10;
}
.transparent-navbar{
background-color:transparent !important;
border-bottom: none;
  }

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

body .x-navbar {
   background-color: transparent;
   box-shadow: none;
}

plus I added the Java content you mentioned.

You will note I added a code to remove the bottom line of the navbar when in transparent mode. When the page loads it is there, if I scroll down and then back up it’s gone.

Second problem. I only want this to work on the landing page: explorington.com
Right now it’s on each of my posts and pages. I have a child theme running is there something special I should do?

[Joao]

Hi There,

Update your css to this:

.white{
background-color:#004220 !important;
height: 10;
}
.transparent-navbar{
background-color:transparent !important;
  }

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

.home body .x-navbar {
   background-color: transparent;
   box-shadow: none;
}

Hope it helps,

If it does not work, please share with us your JS so we can make the necessary changes there.

Joao

[[email protected]]

It didn’t quite work. I did work out some changes that make it better for the main landing page at explorington.com

@media (min-width:979px){

.white{
background-color:#004220 !important;
height: 10;
}
.transparent-navbar{
background-color:transparent !important;
}

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

body .x-navbar {
   background-color: transparent;
   box-shadow: none;
   border-bottom: none;
}

however when I navigate to a post page it’s also transparent at the top and I want it to be a solid navbar with the content below it.

Also, I was hoping when I scrolled down on the mainpage the slider would use parallax.

here is my Java Script

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
		} else {
			$('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
		}
	});
});

I really appreciate the assistance.

[Lely]

Hi There,

To avoid transparency for the single post, please also add this CSS:

body.single-post .x-navbar {
    background-color: #004220 !important;
}

Unfortunately, I am not sure what you meant by when I scrolled down on the mainpage the slider would use parallax. Please clarify.

Hope this helps.

[[email protected]]

That last section of code does make the header opaque but it crops the images and content below. I want the content to start after the header on all but the home page. If you look at any one of the post pages you will see that the content is cropped.

What do I mean by parallax? http://themenectar.com/demo/salient-frostwave/home-blog/

x theme includes a function called parallax when using a content bar that uses it. http://theme.co/x/demo/ethos/1/shortcodes/content-band/

I’m hoping that either postslider can incorporate this function.

[Rad]

Hi there,

It only changes the background, I’m not sure what you mean by cropped images. Would you mind providing a mockup of how it should be? And what content? The slider is right under the navbar if we put it after the header then there will be blank space caused by transparent navbar.

About the parallax, yes, it’s only possible for sections and content band. But it’s not possible for the slider. They are slides, not backgrounds where parallax are applied.

Thanks!

[[email protected]]

Here is a view of : http://explorington.com/2016/06/mount-hal-beaufort-range-hiking/

I’ve attached a series of images.
The blog post page looks right, both when loaded and when scrolling. However my other pages have transparent menus and have the menus overlapping. I only want that effect on the blog post page. I have to attach one more image in a second comment.

[[email protected]]

Here is what my individual posts look like. You will see that the menubar is opaque but overlapping still. The donate button should be separate and not touching the menu bar.

[Rue Nel]

Hello There,

Thanks for send us the screenshots. To resolve this issue, please edit the JS code in your customizer and use this instead;

jQuery(document).ready(function($){
			$('.home .x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.home .x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
		} else {
			$('.home .x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
		}
	});
});

We would loved to know if this has work for you. Thank you.

[[email protected]]

Sadly, no, this did not fix my issue. My blog post page is functioning the way I want. However, when I view my posts they top of the post is still clipped, and when I view my other pages the top navbar is still transparent.

[Paul R]

Hi,

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

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

.home header.masthead {
     position:absolute;
     width:100%;
}

Hope that helps.

[[email protected]]

An improvement! The blog post page is right! The individual blog post pages are right! However when you view the other pages you will note that the navbar is still transparent; rather than opaque.

http://explorington.com/wp-admin/customize.php?return=%2Fwp-admin%2F

[Lely]

Hi There,

Please also try to add this:

body.page .x-navbar {
    background-color: hsl(150,91%,15%) !important;
}

Hope this helps.

[Author]

Posts