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

Solved

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

canikickit
Excursionist
14 1 3

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!

Accepted Solutions (2)
Spac-es
Shopify Partner
389 112 135

This is an 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!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

canikickit
Excursionist
14 1 3

This is an accepted solution.

It worked!  Thank you 😃

View solution in original post

Replies 8 (8)

Spac-es
Shopify Partner
389 112 135

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.

 

is out.png

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
canikickit
Excursionist
14 1 3

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
Shopify Partner
389 112 135

We can try to solve it.

 

1º First go to your theme.liquid:

 

Captura de pantalla 2023-11-10 224750.png

 

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

 

Captura de pantalla 2023-11-10 224830.png

 

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.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
canikickit
Excursionist
14 1 3

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
Shopify Partner
389 112 135

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

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
canikickit
Excursionist
14 1 3

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

Spac-es
Shopify Partner
389 112 135

This is an 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!

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
canikickit
Excursionist
14 1 3

This is an accepted solution.

It worked!  Thank you 😃