Global Transparent Header

requestnoted

#1

Hello, doing some prelim tests with the header builder and have no clue how to recreate a transparent header that you claim can be built (note at bottom of this page claims it’s possible):

Note: Creating a global transparent header is possible via the new feature in Jupiter called Header Builder. To learn more about this, read this article.

I was able to ‘sort of’ get it to work by setting ‘Stick Template’ on the page I’m testing but I don’t want to have to do that to every page.

Can you create a step by step tutorial on how to do this using your new beta header builder? Thanks


#2

Also, ‘Overlapping Content’ - it would be good if you could set it for desktop to overlap, but then choose to not overlap on tablet or mobile so that you can then have an opaque header. The transparent header does not always work for smaller breakpoints. When I set ‘Overlapping Content’ it seems to be global.


#3

You can do this fairly easily through CSS. Are you competent in CSS or would you like me to WIP a quick example up for you? But with this being a bug then im sure it will be fixed in due time


#4

@Brent_Martel

1) Transparent Header:
To create a transparent header using Header Builder, simply add a row to the canvas. Click on the row to see its settings. In the settings ensure that the opacity of the background color is set to 0.

Now, click on the settings icon from the left panel and enable Overlapping Content option.

The above steps will create a transparent header for you on any page.

2) About Overlapping Content option for each device, I have noted this request. If the dev’s see this request fit, it will be added to the Header Builder in the future releases.

Thank you.


#5

@Brent_Martel

Although there is no option to enable Stick Template globally, you can add small CSS snippet to enable the effect of stick template globally.

#theme-page .theme-page-wrapper .theme-content{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#theme-page .theme-page-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#6

How about being able to choose ‘Light’ or ‘Dark’ so that the logo and the main navigation take on the preferred colour?


#7

I am not having success getting ‘stick template’ behaviour by added the CSS that you provided. Can you inspect this in browser inspector to even see if the wrapper ID and CLASS is there? I can’t seem to see those at all. https://beta.jupiter.designpreview.ca/


#8

@Brent_Martel
I tried the CSS and its working absolutely fine.

Please check out the below screenshot.

st_


#9

Yes got it to work thanks.


#10

One more question: I cannot seem to locate how to get rid of the 'border-bottom: 1px" on the header. See screenshots. I have all the settings in the header builder to not have padding, margin, border, background.

Capture2Capture3Capture


#11

This is something which has been added as a default styling to the header while using Header builder.
There is no setting to change that.
You will have to use custom CSS to override it.

Thanks.