start with nonactive state for the notifications button and display some text if there are no notifications on small screens only

Zotlabs/Widget/Notifications.php

@@ -144,6 +144,7 @@ class Notifications {
 		$o = replace_macros(get_markup_template('notifications_widget.tpl'), array(
 			'$module' => \App::$module,
 			'$notifications' => $notifications,
+			'$no_notifications' => t('Sorry, you have got no notifications at the moment'),
 			'$loading' => t('Loading')
 		));
 

view/css/widgets.css

@@ -170,6 +170,9 @@ a.wikilist {
 }
 
 /* notifications */
+.notifications-btn {
+	opacity: .5;
+}
 
 .notification-content {
 	max-height: 70vh;

view/js/main.js

@@ -373,10 +373,12 @@ function notificationsUpdate() {
 
 		if(data.network || data.home || data.intros || data.register || data.mail || data.all_events || data.notify || data.files || data.pubs) {
 			$('.notifications-btn').css('opacity', 1);
+			$('#no_notifications').hide();
 		}
 		else {
 			$('.notifications-btn').css('opacity', 0.5);
 			$('#navbar-collapse-1').removeClass('show');
+			$('#no_notifications').show();
 		}
 
 		if(data.home || data.intros || data.register || data.mail || data.notify || data.files) {

view/tpl/notifications_widget.tpl

@@ -85,6 +85,9 @@
 
 {{if $notifications}}
 <div id="notifications_wrapper">
+	<div id="no_notifications" class="d-xl-none">
+		{{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+	</div>
 	<div id="notifications" class="navbar-nav" data-children=".nav-item">
 		<div id="nav-notifications-template" rel="template">
 			<a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}">