Need Help with Sticky Header and Announcement Bar on Enterprise ThemeHello everyone, I'm currently

[canikickit]

Hello everyone,

I'm currently working on a website with the Enterprise theme, and I've hit a bit of a roadblock. I'm looking to make both the announcement bar and the header bar (which includes the menu and logo) fixed, so they remain at the top of the page as the user scrolls down.

The website I'm working on is www.developmorehousing.com.

I've tried a few CSS tricks, but nothing seems to work perfectly with the Enterprise theme. Has anyone tackled this before or have any insights on how to achieve this functionality? Any guidance or code snippets that have worked for you would be greatly appreciated!

Thank you in advance for your help!

[Spac-es · Accepted solution]

You haven't searched well. I found the responsible code inside your main.css:

    .cc-header--sticky .header.is-out {
        margin-bottom: var(--menu-height)
    }

    .cc-header--sticky .header.is-out .main-menu__disclosure {
        max-height: 0;
        margin-top: 0
    }

Delete it, the header will be visible all the time, I hope that's your solution!

[Spac-es]

After looking at your code, I realized that the problem arises when you scroll down, a class called is-out is added, probably through some script that detects vertical scrolling. That class hides the navigation bar.

[canikickit]

Could someone guide me on how to fix this? I'm not highly skilled in coding, but I'm willing to try my hand with some assistance and a brief explanation.

[Spac-es]

We can try to solve it.

1º First go to your theme.liquid:

2º Click on the code, then press CTRL + F, a search bar will open at the bottom, search and add: is-out.

If when you press enter that text does not appear in the code, do the same process for files whose base name is 'header'.

If it appeared in the code, send me a screenshot or send me the code directly.

[canikickit]

surprisingly, there is no mentioned of "is-out" in the code in the section you mentioned or any section with header in the title.  Any other suggestions?

[Spac-es]

Try main.css or base.css depending on how it appears in your theme.

[canikickit]

unfortunately, no results - I don't think this is the wording to search for since I can't identify it

[Spac-es · Accepted solution]

You haven't searched well. I found the responsible code inside your main.css:

    .cc-header--sticky .header.is-out {
        margin-bottom: var(--menu-height)
    }

    .cc-header--sticky .header.is-out .main-menu__disclosure {
        max-height: 0;
        margin-top: 0
    }

Delete it, the header will be visible all the time, I hope that's your solution!

[canikickit · Accepted solution]

It worked!  Thank you 😃