Announcement bar covering header!!!

[aynoorstudios]

Hi please help! The theme I bought via an IG page, the announcement bar looks terrible! It covers half the header. How do I fix this?

https://aynoorstudios.com/

^current

<style>
@media (max-width:767px) {
.header {
padding-top: 70px!important;
}
</style>

^ I pasted this above </body> tag and it did nothing. (idk if I am even doing that right, I just paste it and hit save. Not sure if there is further steps...)

Explain like I am five! Thank you!

[Dan-From-Ryviu]

Hi @aynoorstudios,

Please remove the code you added to make your header sticky, then go to your store admin > Sales channels > Online store > Themes > Customize > Header, drag and drop the Header block below the Announcement bar, and change the Sticky header of the Header to Always 

[Moeed]

Hey @aynoorstudios 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.nav-sec.home-nav-d {
    padding-top: 55px !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[BiDeal-Discount]

Hi @aynoorstudios 

Your custom code CSS will not working, Let try to add this code above your body tag and let me know the result:

<style>
.nav-sec.home-nav-d:not(.active){
  top: 44px;
}
</style>

[GTLOfficial]

Hello @aynoorstudios 
Go to online store ----> themes ----> actions ----> edit code ----> assets ----> style.css
add this code at the end of the file and save.

.nav-sec.home-nav-d {
top: 3rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[topnewyork]

Hi @aynoorstudios 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
  section.hero-sec {
    margin-top: 6rem !important;
}
.nav-logo {
    margin-top: 3rem !important;
}
.nav-listing {
    margin-top: 3rem !important;
}
</style>

 If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[WebDeskSolution]

Hello @aynoorstudios 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search style.css
• Insert the provided CSS code at the end of the file and save the changes.

nav.nav-sec
{
    top: 44px;
}
nav.nav-sec.active
{
    top: 0;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.