Adding a notification banner to your Help Center v2

@...

Glad I could help. :)

Have a great rest of your day!

I have a strange issue that I can't figure out for the life of me. I'll post the code at the end of this. 

I have 2 alerts, one red for outages and one green for when the outage is resolved. I copied the code from the OP and made some minor tweaks to get it as desired. They both function properly, but the green alert is bigger (taller) than the red one. 

At first, I thought I tweaked the wrong thing, and maybe it was my margins or something. So I started from scratch. I coped the code from the OP again, made some changes to the sizing, and removed the megaphone kind of thing, and when I liked it, I copied that and made it my green alert, only changing the background color. So everything should be the same, yet it isn't. 

Here are some examples of what I mean. For this test, I used the same article without modifying it. I only modified the "label_names=alert" part to the .js to use style1 or style2. Here is the red alert:

And here is the green alert:

The red alert is 53 pixels tall and the green is 84 pixels tall. No idea how there is a difference. 

Here is the code from my .css:

/*MW-Notificaiton Banner CSS */
/* Common, default styles for the notification box */

/* change the background color by editing "background"  */
/* change the text color by editing "color"  */
.ns-box {
	background: #e84325;
	padding: 15px 0px 15px 0px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: #e7e7e0;
	font-size: 85%;
  border-bottom: 1px solid #e7e7e0;
}

.ns-box2 {
	background: #008E13;
	padding: 15px 0px 15px 0px;
	line-height: 1.4;
	z-index: 1000;
	pointer-events: none;
	color: #e7e7e0;
	font-size: 85%;
  border-bottom: 1px solid #e7e7e0;
}

.ns-box.ns-show {
	pointer-events: auto;
}

.ns-box a {
	color: inherit;
  opacity: 0.7;
	font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
	opacity: 0;
}

.ns-box p {
    margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
	pointer-events: auto;
}

.ns-close {
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	top: 4px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.ns-close:hover, 
.ns-close:focus {
	outline: none;
}

.ns-close::before,
.ns-close::after {
	content: '';
	position: absolute;
	width: 3px;
	height: 60%;
	top: 50%;
	left: 50%;
	background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
	background: #fff;
}

.ns-close::before {
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	transform: translate(-50%,-50%) rotate(-45deg);
}

.ns-box-inner i {
    color: #fff;
    font-size: 3.8em;
  
}

.megaphone:before { 
  content:'\1F4E3';
  font-family: "entypo";
  font-size: 2.2em;
  display: none;
  
}

/* Top bar notifications */
.ns-box.ns-bar {
	top: 0;
	left: 0;
	width: 100%;
}

.ns-bar .ns-close {
	background: transparent;
	margin-top: 15px;
	right: 20px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
  display: none;
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
	background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}




/* Slide on top */

.ns-effect-slidetop .icon {
	position: absolute;
	display: block;
	font-size: 109%;
	top: 50%;
	left: 1em;
	-webkit-transform: translate3d(0,-20%,0);
	transform: translate3d(0,-20%,0);
}

.ns-effect-slidetop p {
	padding: 0 3.2em;
	font-size: 1.2em;
	display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
	width: 2px;
	background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
	background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animScaleUp;
	animation-name: animScaleUp;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
	-webkit-animation-name: animFade;
	animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

@keyframes animScaleUp {
	0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); transform: translate3d(0,-50%,0) scale3d(0,0,1); }
	100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
	-webkit-animation-name: animSlideTop;
	animation-name: animSlideTop;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); }
}

@keyframes animSlideTop {
	0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
	100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

And here is the code from my .js:

 // MW-Notification Banner
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alert" ).done(function( data ) {

$.each(data.articles, function(index,item) {

var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'

$('.alertbox').append(style1);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});

});
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=alertresolved" ).done(function( data ) {

$.each(data.articles, function(index,item) {

var style2 = '<div class="ns-box2 ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><a href="'+ item.html_url + '">' + item.title + '</a>' + item.body + '</p></div><span class="ns-close"></span></div>'

$('.alertbox').append(style2);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});

});

After the good ol' "delete and see what happens" troubleshooting, I found that if I delete the padding for ns-box2, the height matches that of ns-box. Could the padding from ns-box affect ns-box2 somehow? That's very strange to me. 

@...

There might be a couple of issues you are experiencing. The first thing I see is that the separation of the CSS for each notification is not complete, this is what is most likely partly causing your issue with it not looking correct.

CSS Issue

To fix the CSS issue, go through your CSS code and where the ".ns-box" is included in those will also have to be duplicated.

• For example, I see that you created ".ns-box2" but I also can see that ".ns-box.ns-show" and ".ns-box a" have not been duplicated. Anywhere where the original ".ns-box" was it will need to be duplicated and replaced with the ".ns-box2"

Is there any reason why this wouldn't work on the Sandbox? I've followed the instructions from Wes, and I think I've done it right, but the banner is not displaying. URL: https://medbridge1603833747.zendesk.com/

What would be most helpful for me to provide here?

Hey Joshua,

It should work in a sandbox. When you preview the changes as an Admin, does your banner show regardless of the publication state of the alert banner article? For example, this is the preview on one of ours - neither of the articles are published to be visible to end-users, but both banners (we have two articles set as templates for banners) are visible in the preview.

If it's not showing on Admin preview, that suggests something's not quite working for you in the html, js or css (for me it was something like a missing comma or bracket in script.js).  If it is showing in Admin preview, then check your visibility permissions and published state of your article with the alert label :)

Hope that helps!

@... - thanks for the response. No, it's not showing at all. I'm not a coder - I just know enough to be dangerous. I'll comb through it and see if I'm missing a bracket or comma somewhere. A lot of the text is red in the js code and I assumed it was just part of the syntax coloring. XD

I'll have a look and see if I can figure it out. If not, you know I'll be back. :)

Thanks again!

@... In the JS code, there are dollar signs and when I run the code through a javascript checker it says the $ is undefined. I checked the remainder of the JS code and there are no other $ occurring. Is that something that's defined in the CSS?

@... Your summary of "I'm not a coder - I just know enough to be dangerous" is very much applicable to me as well (I love that description though and I'll be using that myself more often :D), so I'm not able to answer your question unfortunately! My js has dollar signs in though, so it the directions in the GitHub from Wes should work for you.

If it helps, I put the CSS and script at the very bottom of both respective files, after everything else (rows 331-344 below).  If I recall, I think the issues I had the first time around were trying to fit this in before the widget customisation, as I thought it would have to be higher up the script to be in order, but it can just go at the end no problem :)

@... Thank you for that. And glad I could give you a new phrase. :)

It turns out that this code did NOT work on our sandbox. When I added it to a test version of our actual (non-Sandbox) site, it worked fine. I've been tweaking it to make it look the way we want. I still have some work to do to make it look good on mobile. And I'll probably be tweaking the code a little so we can have multiple alerts with different colors and icons.

Thanks for all your help!

I am a little confused about the proper way to make this happen. I can't really do testing since it can only be done live and when there is a notification needed (such as an outage). Here are a few questions I have:

- The article with the tag/info, does that have to be published in order to see the notification banner or can it be a draft? 

- Does the article have to be visible to everyone or can I leave it only visible to Admins/Agents? 

- There is sometimes a delay in seeing the banner, even if I clear cache. Is there something I need to change? 

That's it for me, for now at least. Thanks in advance. 

Hey Kyle, I'll try and help from my experience with this piece :)

- Yes, the article needs to be published in order for it to appear to whichever users have permission to view the article.  However it should show in the preview for you, regardless of whether it is published (at least it does for me :) )

- I'm not 100% on the second point I've only tested this in preview, but if it's published, the banner shows for all users, but the article that the banner is populated from only shows for the user segment it is aimed at.  (e.g. I have an article set to be for Agents and admins, it doesn't come up in searches or in the section, but the banner is visible).

- I sometimes see a delay in promoted articles and other Guide changes going live in general, so I think sometimes the theme needs time to update.  Normally I use an incognito window on Chrome to check any public facing changes.

Hope that helps!

Thanks for the reply Harriet Klymchuk!

My goal is to actually not have the article published. I only want it to be seen as a banner and nothing else. Not in searches or anything. I even removed a lot of the stuff that would allow the user to click on it and bring them to the article. When you say "preview," are you referring to the notification banner itself? 

I think a way around the delay would be to have multiple themes. One with no banner, one with a banner (and repeat for however many banners you have). Then if you need a banner to display, switch to the theme with that banner. That should work quicker (in my mind, at least). Does anyone have any thoughts on this theory? 

Hey @... sorry for any confusion! By preview I meant, previewing the theme in Guide (where you edit the templates) rather than looking at it on live. 

I've just checked one of our banners that's persistent at the moment and changed the settings to see how it looked and can confirm if you set the article to only be visible to Agents and admins (or other segment) then it won't show for all users or in any searches for end-users, but the banner stays visible. Personally, I don't think there's any harm in the article of the banner being searchable or visible - if it's published as a banner then it's intended for users to view, plus anyone who comes across the article may want to comment or vote on it (if you have those enabled).

With your templates option, I think that could work but changing the theme in order to change the banner content seems a bit more difficult to me than just editing the publication status or content in an article itself. I'm not sure if it'd be any faster either but worth testing on what works for you!  For us, it's great having the article option, as agents with access can edit the banners as needed without needing an Admin or Guide Manager to edit the theme.

Hey, @... - I can confirm what Harriet has told you.

Hi All, 

One minor issue i'm having and i'm convinced its a quick positioning fix.. I'm just not seeing it!!

I have 2 banners, the orange for announcements (ns-box) and the blue for promoted info (ns-boxpromoted). I want the X to be in that position for both banners so users can close them.

However, after a second, the X for the blue banner moves from the top right position of the blue banner and sits on top of the orange X on the orange banner. Rather than having 2 X's on the orange where the first click clears the blue banner and the second click clears the orange, how can I get the X to stay fixed in the top right of the blue banner.

My js code..

// MW-Notification Banner
if (window.location.href == "https://help.zoopla.co.uk/hc/en-gb") {
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=announcement" ).done(function( data ) {

$.each(data.articles, function(index,item) {
var style1 = '<div class="ns-box ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><span class="megaphone"></span></i><p><strong>Announcement 📣</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-close"></span></div>'

$('.alertbox').append(style1);
});
$('.ns-close').on('click',function(){
$(".alertbox").remove();
});

});
$.get( "/api/v2/help_center/"+$('html').attr('lang').toLowerCase()+"/articles.json?label_names=promoted" ).done(function( data ) {

$.each(data.articles, function(index,item) {
var stylepromoted = '<div class="ns-boxpromoted ns-bar ns-effect-slidetop ns-type-notice ns-show"><div class="ns-box-inner"><i class="fas fa-star"></i></i><p><strong>Promoted Article ⭐</strong></p><p><a href="'+ item.html_url + '">' + item.title + '</a>' + '</p></div><span class="ns-closepromoted"></span></div>'

$('.promotedbox').append(stylepromoted);
});
$('.ns-close').on('click',function(){
$(".promotedbox").remove();
});

});
}

My css code..

/*MW-Notificaiton Banner CSS */
/* Common, default styles for the notification box */

/* change the background color by editing "background" */
/* change the text color by editing "color" */
.ns-box {
background: rgba(255,87,34,100);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}
.ns-boxpromoted {
background: rgba(26,155,224,1);
padding: 10px 20px 20px 20px;
line-height: 1.5;
z-index: 1000;
pointer-events: none;
color: rgba(255, 255, 255, 1);
font-size: 85%;
border-bottom: 1px solid #DDD;
}

.ns-box.ns-show {
pointer-events: auto;
}

.ns-boxpromoted.ns-show {
pointer-events: auto;
}

.ns-box a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}

.ns-boxpromoted a {
color: rgba(255, 255, 255, 1);
opacity: 0.7;
font-weight: 700;
}

.ns-box a:hover,
.ns-box a:focus {
opacity: 1;
}

.ns-boxpromoted a:hover,
.ns-boxpromoted a:focus {
opacity: 1;
}

.ns-box p {
margin: 0;
}

.ns-boxpromoted p {
margin: 0;
}

.ns-box.ns-show,
.ns-box.ns-visible {
pointer-events: auto;
}

.ns-boxpromoted.ns-show,
.ns-boxpromoted.ns-visible {
pointer-events: auto;
}

.ns-close {
width: 20px;
height: 20px;
position: absolute;
right: 4px;
top: 4px;
overflow: hidden;
text-indent: 100%;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.ns-close:hover,
.ns-close:focus {
outline: none;
}

.ns-close::before,
.ns-close::after {
content: '';
position: absolute;
width: 3px;
height: 60%;
top: 50%;
left: 50%;
background: #6e6e6e;
}

.ns-close:hover::before,
.ns-close:hover::after {
background: #fff;
}

.ns-close::before {
-webkit-transform: translate(-50%,-50%) rotate(45deg);
transform: translate(-50%,-50%) rotate(45deg);
}

.ns-close::after {
-webkit-transform: translate(-50%,-50%) rotate(-45deg);
transform: translate(-50%,-50%) rotate(-45deg);
}

.ns-box-inner i {
color: #fff;
font-size: 2.2em;
}

.ns-boxpromoted-inner i {
color: #fff;
font-size: 2.2em;
}

.megaphone:before {
content:'\1F4E3';
font-family: "entypo";
font-size: 2.2em;
}




/* Top bar notifications */
.ns-box.ns-bar {
top: 0;
left: 0;
width: 100%;
}

.ns-boxpromoted.ns-bar {
top: 0;
left: 0;
width: 100%;
}

.ns-bar .ns-close {
background: transparent;
margin-top: 15px;
right: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

.ns-bar .ns-close::before,
.ns-bar .ns-close::after {
background: #b7b5b3;
}

[class^="ns-effect-"].ns-bar.ns-hide,
[class*=" ns-effect-"].ns-bar.ns-hide {
-webkit-animation-direction: reverse;
animation-direction: reverse;
}





/* Slide on top */
.ns-effect-slidetop {
box-shadow: inset 5.4em 0 rgba(0,0,0,0.1);
}

.ns-effect-slidetop .icon {
position: absolute;
display: block;
font-size: 109%;
top: 50%;
left: 1em;
-webkit-transform: translate3d(0,-20%,0);
transform: translate3d(0,-20%,0);
}

.ns-effect-slidetop p {
padding: 0 3.2em;
font-size: 1.2em;
display: inline-block;
}

.ns-effect-slidetop .ns-close::before,
.ns-effect-slidetop .ns-close::after {
width: 2px;
background: #fff;
}

.ns-effect-slidetop .ns-close:hover::before,
.ns-effect-slidetop .ns-close:hover::after {
background: #fff;
}

.ns-effect-slidetop.ns-show .icon,
.ns-effect-slidetop.ns-show p {
-webkit-animation-name: animScaleUp;
animation-name: animScaleUp;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.ns-effect-slidetop.ns-show p {
-webkit-animation-name: animFade;
animation-name: animFade;
}

@-webkit-keyframes animScaleUp {
0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); }
100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

@keyframes animScaleUp {
0% { opacity: 0; -webkit-transform: translate3d(0,-50%,0) scale3d(0,0,1); transform: translate3d(0,-50%,0) scale3d(0,0,1); }
100% { opacity 1; -webkit-transform: translate3d(0,-50%,0) scale3d(1,1,1); transform: translate3d(0,-50%,0) scale3d(1,1,1); }
}

.ns-effect-slidetop.ns-show,
.ns-effect-slidetop.ns-hide {
-webkit-animation-name: animSlideTop;
animation-name: animSlideTop;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}

@-webkit-keyframes animSlideTop {
0% { -webkit-transform: translate3d(0,-100%,0); }
100% { -webkit-transform: translate3d(0,0,0); }
}

@keyframes animSlideTop {
0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

.custom-iframe {
height: 1050px!important;
border: none!important;
}

Hi everyone,
I hope someone can help me with this!

I've been trying to implement this add-on on our website based on the Copenhagen theme many times over, following the instructions to the dot each time but I've been unsuccessful so far!

I keep getting the same error message in the console:

I can at least see the alert div-box when inspecting the site but that alert-box is totally empty and doesn't show anything, even though I've created many articles by now, with the label: "alert" and made it so that everyone should be able to see it, not only admins and agents.

I've also experimented with the ways I implement the codes, like for example, pasting the JS code at the very top or at the very bottom, nothing changes, still getting the very same error.

Has anyone else experienced this? Have I missed something?

Hi Surlyan,

Are you doing this on the page called header.hbs?  Here is my code you can look at.  It is working for us.  I just have to go to an article in the KB,  put the tag 'alert' and the message to post for it to activate.  Hope it helps....

<!--This should be added at the very top -->
<div class="alertbox"></div>
<header class="header">
<div class="logo">
{{#link 'help_center'}}
<img src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{/link}}
</div>
<div class="nav-wrapper">
<span class="icon-menu" tabindex="0" role="button" aria-controls="user-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}"></span>
<nav class="user-nav" id="user-nav">

{{link 'new_request' class='submit-a-request'}}
</nav>
{{user_info}}
</div>
</header>

Suriyan Schock, just for clarification, is the tag "alert" or alert? It should be just alert although I'm assuming you were using quotes because that's the proper way to type, just making sure. 

I would like to place this banner over several articles. However, it is repeating the alert banner for each article that has the label. Could you help, please? I'm not sure what I am doing wrong. I essentially only want to show the banner over articles with the alert label. Not over the entire help center. I moved the alert HTML from the header page to the alerts page, but it is still showing a separate alert for each article.

@... I have not implemented this myself but I have helped out a couple of other people with their implementations. 
I believe that this code uses jQuery as well as javascript. I know that some themes do not automatically include it. That is where I would start. 
Here is the first article that popped up for checking if it is loaded. https://medium.com/coding-at-dawn/how-to-check-if-jquery-is-loaded-on-a-page-using-javascript-333b1ea27dc1

-----------------------------------------------------------------------------------------------------------------

@... Again, I have not implemented this myself but I believe that your implementation may be backward. I believe that the 'alert' label is used to identify which article will be used for the alert header. So, in your case, all of the headers are being generated from the articles with the 'alert' label.

That being said I believe that you can achieve what you are looking to achieve with some conditionals. 

Specifically, I would go back to the initial way of implementing it and add some conditionals like Wes mentioned in GitHub. https://github.com/moderatorwes/Notification-Banner#how-do-i-only-show-the-alert-on-the-homepage-and-not-all-the-other-pages

Hi, the only solution in my case turned out to be in the script.js file, the original one kept giving me "$ is not defined".

But with these added code-lines and changes to the original codes - It all now works properly!
This whole code-section is in its own scope and at the very bottom of the script.js file.

Note that using the labels "alert" or ""alert"" works just the same ( alert or "alert" typed in as label both works , just to clarify ).

I hope this info can help any other, that may come across the same issues that I've experienced before finally fixing it like this!
*********************************************************

*********************************************************
Thank you for your efforts to help me at any rate:
Krista Martin , Kyle B and Alejandro Colon

@... No problem.

I believe that the reason your code worked is that you replaced the jQuery code with plain Javascript. 

Glad you are up and running. Hopefully, this will help others that run into the same issue.

Having a bit of trouble implementing this.

I have pasted the necessary code in the corresponding places:

And then gone ahead and created a new article and added an "alert" label to it. But it doesn't seem to work. The only thing that seems to be happening is that its moving our logo from the top right to the top middle of the landing page. Am I missing something?

@... Can you provide some screenshots of the code you put in? Blank out any identifying information but the important piece is the structure of the code and where exactly it was input. 

---------------------------------------------------------

The first thing that comes to mind is that your logo should not be affected. On the instructions, it says to add the HTML to the very top of the code on the header.hbs
https://github.com/moderatorwes/Notification-Banner#how-to-install

---------------------------------------------------------

The other thing that comes to mind is that you should be seeing at least something. Because you are only seeing the logo move I would open the developer console on a web browser to check for any errors in the logs.
https://balsamiq.com/support/faqs/browserconsole/

Javascript starting at line 403 (at the end of the file):

.css also at the end of its corresponding file:

The header was inserted as the first thing under the "header" tag:

Though I also tried placing it above the header tag, and also at the very top of the document.

@... Looks like everything seems to be in the correct places. 

You may want to try this suggestion. https://support.zendesk.com/hc/en-us/community/posts/207738148/comments/360013764794

-------------------------------------

If the above does not work, then the next thing would be to use the developer tools to find the alert. As seen here. https://support.zendesk.com/hc/en-us/community/posts/207738148/comments/1260802901609

--------------------------------------

If you can find it and it seems to be good then check the console in the developer tools for errors. As in here. https://balsamiq.com/support/faqs/browserconsole/

----------------------------------------

Provide some screenshots and that should at least point us in the correct direction. 

@... Looking at the github repo it looks like others have had the same issue as yourself and there has been an update to the code. I would try the new code as it does not rely on jQuery which is no longer supported by Copenhagen v2

Let's see if that makes a difference.

Hi, does anyone have the same problem with the CSS like we have with this type of announcement?
This type of message should be standard enough for the CSS to work properly but it doesn't, especially on different screen-sizes!

Does anyone have a suggestion to how I should fix this in the CSS file so longer announcement-texts can be displayed in a nice way rather than showing this kind of mess?

Question from a novice Zendesk user.

I am unable to locate HTML tab or css tab. All I can see when you select the edit code option, are a  bunch of .hbs files in the left column, along with script.js and style.css files.

Could anyone help locate the HTML tab, or css tab. The "tab" as mentioned in solution.

Much thanks.