[dcornejo]

I added a link to a button and text and when clicked, nothing happens. Can you help me so that a button and text link works?

[Aakash Chakravarthy]

Hi,

Can you please share the page URL where I can see the announcement ?

Thanks,
Aakash

[dcornejo]

Hi Aakash,

Thank you for the quick response. I activated the Announcer bar on https://1scom.com/.

[Aakash Chakravarthy]

Hi dcornejo,

The announcement was blocked by the “header”.

That is the reason why it was not clickable.

You can paste the below CSS in your theme settings to move the header down so that announcement is clickable.

@media (min-width: 992px) {
    .header-transparent header.main-header {
        top: 50px;
    }
}

Thanks,
Aakash

[dcornejo]

Hi Aakash,

Thank you for providing CSS. The CSS made the button link work but on mobile devices there is white space beneath the Announcer bar now. Can the white space be removed on mobile devices?

Also, when the Announcer bar is set to sticky, the bar lays on top of the menu and social media icons on desktop and mobile devices. Can the Announcer bar be right above the menu and social media icons when set to sticky?

[dcornejo]

Hi Aakash,

I found the problem with the plugin. The problem occurs when the sticky setting is set to off. When sticky is set to off, the button with link doesn’t work on desktop/tablet website view but button does work on mobile website. When sticky is set to on, button does work on all devices.

Can you fix the plugin so that when sticky is set to off, button with link works on all devices?

[Aakash Chakravarthy]

Hi dcornejo,

I saw your website and the issue is with the theme.
It is overlaying the social icons on top of the announcement hence the announcement and the buttons inside it are not clickable.

The previous CSS I gave is the fix for this case. But it is not present in your website.

Can you please copy and paste that CSS in your theme settings or wherever CSS can be inserted ?

@media (min-width: 992px) {
    .header-transparent header.main-header {
        top: 50px !important;
    }
}

Once inserted, the social icons will move down like in the screenshot below.

Thanks,
Aakash

[dcornejo]

Hi Aakash,

Thank you for providing the css. I inserted the css into the additional css and the button with link on desktop/tablet view doesn’t work but the button with link works on mobile view. Is there css that can push down the social icons only on mobile/tablet view so the Announcer button works on desktop/tablet view?

The previous css code provided that pushed down the social icons pushed the social icons down on all devices which caused the mobile view to have a blank white strip towards the top of the page.

[dcornejo]

Hi Aakash,

Thank you so much for your help and support! The CSS you provided worked perfectly! Thanks again I really do appreciate you!

[Aakash Chakravarthy]

Cheers !

[Author]

Posts