Space between header and announcement bar, sticky header and smaller text.

[Muselabel]

Hello,

I have a website issue that I need help with:

1. There is some space between the header and the announcement bar that I want to remove. The solution I received worked on my desktop but not on my mobile phone.

2. I would like to have a sticky header when scrolling on my website.

3. I want the text on the photos in the "Featured Collections" section to be smaller on mobile phones

Can someone help me resolve these issues so that the changes work on both desktop and mobile devices?

The theme of my website: SENSE THEME

Url of my website: https://muselabel.nl/

[BSSCommerce-TC · Accepted solution]

Hi @Muselabel ,

You can follow these steps to solve point 1 & 3 

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

.section-header {
  margin-bottom: 0 !important;
}

.section-collection-list h3.card__heading {
  font-size: 16px !important;
}

@media screen and (max-width: 769px) { 
    .videoBackground .videoBox { 
        margin-top: 0 !important; 
    } 
}

And this is final result

[Muselabel]

Thank you very much! I worked for both issues.

[BSSCommerce-TC]

Hi @Muselabel ,

Can you kindly give us a like? This can be a reference for other merchants if they have an issue like you and greatly motivate us to contribute to our community.

[BSSCommerce-TC]

Hi @Muselabel ,

I think point 2 you need to remove or hidden announcement bar

Insert below code at the end of file base.css

.announcement-bar-section {
   display: none;
}

.header-wrapper .header {
    position: fixed !important;
    width: 100%;
    background-color: #f589c9 !important; // optional if you want change colors header
}

And this is final result you want:

[Muselabel]

But I still want to make use of my announcement bar. Is there not another way of fixing this issue?

[BSSCommerce-TC]

Hi @Muselabel ,

Yes , you need follow these steps:

Step 1: Go to Online store > Themes > Edit code and find theme.liquid file

Step 2:  Insert the following code before the </body> tag.

document.addEventListener('scroll', function() {
    var announcementBar = document.querySelector('.announcement-bar-section');
    var header = document.querySelector('.header-wrapper .header');

    if (window.scrollY > 0) {
        announcementBar.style.display = 'none';
        header.classList.add('fixed-header');
    } else {
        announcementBar.style.display = 'block';
        header.classList.remove('fixed-header');
    }
});

Step 3: Insert below code at the end  base.css file and Save them

.announcement-bar-section {
    transition: display 0.3s ease;
}

.fixed-header {
    position: fixed !important;
    width: 100%;
    background-color: #f589c9 !important; /* optional if you want to change header color */
    z-index: 1000;
}

We hope it will helpful with you. If our suggestions are useful, please let us know by giving it a like, marking it as a solution.

[Muselabel]

it doesn't work unfortunately