Transparent header on Home page before scroll

How do I set the header of the home page only to be transparent before scrolling? Similar to your “wine” demo. Will the transparent header work with the categories menu header style?

Hello,

Choose the Simplified type of header http://prntscr.com/kbfsvv

In addition, configure the options in the Appearance tab.

Best Regards

A couple things:
1. When I set header to transparent, my top bar disappears
2. How do you set the header to have a background color on scroll?
3. Is there a way to set the transparent header for the home page only, and have all other pages use the categories menu header by default?

I just noticed a different problem also. My ajax product search is listing results horizontally rather than vertically (see picture for strange layout).

Attachments:

You must be logged in to view attached files.

Hello,

As for the header, you can set different headers for each page individually http://prntscr.com/kbmpr8

You can set “Simplified” on the home page.

Header always has a color on the scroll. You can change it with custom CSS is you have different headers on different pages.

As for the search. This is the way it works, you can check the demo. If we try to put results in a list, part of the results would be hidden.

Best Regards

Ok almost got it. On the homepage, I set to simplified with header above content. I set custom desktop CSS as follows:

.home .main-header {
background: transparent;
}

After doing this, the top bar completely disappears. I need it to be visible.

Also, see screenshot of your demo ajax search where search results are listed vertically. Now look at my screenshot where products are oddly spaced in some horizontal format. It wasn’t like this before.

Attachments:

You must be logged in to view attached files.

Hello,

As for header: try to switch between Header Layout to choose the most appropriate. In addition, you will find Header > Appearance where you can set configurations as per your needs.

Regarding search product: add this CSS to Theme Settings > Custom CSS:

.search-results-wrapper .basel-search-results {
	max-width: 340px;
}

Our nearest release will allow setting the number of the search result.

Best Regards

I’ve set my css for the transparent home page per the attached image (first picture). However, the header stays transparent after scrolling (second picture). Is there different css so that it changes to opaque after scroll?

Attachments:

You must be logged in to view attached files.

Hi,

The styling of the header depends on the header type you are using. For header categories that you are using now on your homepage, your custom code will work like you described and transparent background will be applied only for non-sticked status (https://gyazo.com/a20ff6ffc244a6355fe85bde80454d5d).

If you will use another type of header like E-commerce, custom code for the same purpose will look like this.

.home.main-header:not(.act-scroll) {
background: transparent;
}

Regards

[Author]

Posts