BB theme header always on top

BB Theme
1

Hey there… I just happen to be testing a plugin on a site where I also have BB theme installed. This plugin essentially uses jQuery to create a modal popup with a wrapping background that fills the screen with a semi-opaque background. (typical use case essentially)

What I’ve noticed is that even though I have turned off the static header option for the BB theme, the header is still always on top of my background even though it covers everything else. If I remove the header in developer tools, I can see that my background is behind the header.

This is the jQuery I’m using to get the dimensions for this mask and apply it…

//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();
		
	//Set heigth and width to mask to fill up the whole screen
	$('#inm-cta-mask').css({'width':maskWidth,'height':maskHeight});

Any thought on how to be sure my mask would always cover the header, even the static header?

UPDATE: I have tried adding a massive z-index, btw, and that doesn’t do anything.

2

Hey Michael,

Thanks for getting in touch! Do you mind sharing the site URL you are testing this plugin on? Better yet, grant us temp admin access to the site as well so we can check the backend? You can use the private reply option below. If that’s not possible maybe the plugin you are using so we can test it out on our local dev installs?

Ben

3

[Content Hidden]

4

Hey Michael,

Are you able to add CSS to the overlay? You can change its position from absolute to fixed and that should fix you right up! But if you can’t, you can just override their CSS using the snippet below.

.fl-page #inm-cta-mask {
  position: fixed;
}

Hope this helps!

Ben

5

Good catch Ben… that did it! Was that my fault for thinking “absolute” was the right option for this case or is it something I need to tuck away for interacting with how BB creates the headers?

Thanks!

6

Hey Michael,

No worries! Using the absolute position would depend on the theme you are using. Our theme, which is based on Bootstrap(probably a lot of themes are), applies a relative position to almost all elements. This limits the abilities of the absolute position, hence the problem you are experiencing. A fixed positioned element won’t experience the same since it is based on the viewport.

Hope this makes sense.

Ben