Menu hidden under sticky announcement banner

[harper1989]

Hi Everyone,

I see this appears to be an issue for most users when they have a sticky announcement bar.

Part of my menu drop down is missing on the desktop version of FOCAL THEME 12.0.1

See below, there should be another menu item which appears to be hidden underneath the announcement bar. Is there a way to 'bring this forward' so that it is visible?

It is fine in mobile view.

Cheers

Matty

[Hamza_Hussain]

can you provide your Store URL?

[Made4uo-Ribe]

Hi @harper1989 

Would you mind to share your store URL? Thanks!

[harper1989]

Hi,

Thank you for the swift response

https://04f0c9-70.myshopify.com/

Password: spacetravelexplore!

Cheers

Matty

[Made4uo-Ribe · Accepted solution]

Thanks for the info, check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

div#shopify-section-sections--23050754392332__announcement-bar {
    z-index: 1 !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[harper1989]

perfect, worked immediately! Thank you so much

[harper1989]

Hi,

Unfortunately, the code change has impacted the announcement bar drop down, especially on mobile view.

When you click on the announcement bar drop down, text in the sections below the announcement bar shows through like this:

This is even more troublesome in mobile view as everything is on one small screen and all the text is clashing.

Please can you help

Many thanks

[Made4uo-Ribe]

Sorry, but i didnt change the dropdown only the announcement bar to send to back. Can I take a look in your so i can get what you mean? Thanks!

[harper1989]

Thank you - Will send you a DM with URL etc

[Made4uo-Ribe]

Welcome, sorry i cant replicate the problem youve mention. 

It seems it working well on my end. 

[harper1989]

The problem is when you expand the announcement bar... so click on 'learn more' on the red bar... it now does not sit on top of the content below, because the code you have recommended has altered how the accouncement bar sits on top of the page....

[harper1989]

Example of the issue below - see what happens when you click 'learn more' on the announcement bar: