Notification and Private Messages text hidden

[Hervé]

Hi,
When the main page loads I see the fa-bell icon and "Notifications" then the fa-inbox icon and "Private messages".
When it is loaded the text disappears leaving only the 2 icons : how to prevent the text to disappear ?

[Mannix_]

I wouldn't do that but
remove

Code: Select all

.linklist.compact .rightside > a > span {
	display: none;
}

from common.css

[Hervé]

Thank you,
it works but then I have only Notifications and Private messages in the navbar, i.e. Contact, ACP, MCP, ... are moved to the quick link dropdown list.
I also use the header banner extension : I will ask to it's author.

[Mannix_]

if you don't want links to be moved change data-last-responsive="true" to data-skip-responsive="true" in the navbar_header.html

[Hervé]

Can you explain what data-last-responsive="true" and data-skip-responsive="true" do ?

[Mannix_]

Those are attributes for javascript to use to make the links behave they do. Links with the first will be moved to the quicklinks dropdown if there is not enough space to keep them in a single line and with the second they won't be moved even if there is not enough space

[Hervé]

So if I understrand I should
remove .linklist.compact .rightside > a > span { display: none; } from common.css
so that the "Notifications" and "Private messages" texts do not disappear but you write you wouldn't do that
AND replace data-last-responsive="true" by data-skip-responsive="true" in Navbar Header
so that the other ones are not moved to the quicklinks dropdown .

As I have my own style with a specific NavBar Header I can modify the response there.
Is it possible not to modify common.css but do something in my custom css ?

[Mannix_]

Yes you can. If you don't want to modify common.css add

Code: Select all

.linklist.compact .rightside > a > span {
	display: inline;
}

to your custom css file

[Hervé]

Sorry, this doesn't work.
With your modifications the texts of notifications and private messages are preserved but the other entries of the navigation bar are completely gone, I can't even find them in the quick links dropdown.
Here is my complete Navbar_header.html (without your changes): the only problem is that I see the icons of notifications and private messages but not their texts :

Code: Select all

<div class="navbar" role="navigation">
	<div class="inner">

	<ul id="nav-main" class="nav-main linklist" role="menubar">

		<li id="quick-links" class="quick-links dropdown-container responsive-menu<!-- IF not S_DISPLAY_QUICK_LINKS and not S_DISPLAY_SEARCH --> hidden<!-- ENDIF -->" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span>{L_QUICK_LINKS}</span>
			</a>
			<div class="dropdown">
				<div class="pointer"><div class="pointer-inner"></div></div>
				<ul class="dropdown-contents" role="menu">
					<!-- EVENT navbar_header_quick_links_before -->

					<!-- IF S_DISPLAY_SEARCH -->
						<li class="separator"></li>
						<!-- IF S_REGISTERED_USER -->
							<li>
								<a href="{U_SEARCH_SELF}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_SELF}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF S_USER_LOGGED_IN -->
							<li>
								<a href="{U_SEARCH_NEW}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_NEW}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF S_LOAD_UNREADS -->
							<li>
								<a href="{U_SEARCH_UNREAD}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-red" aria-hidden="true"></i><span>{L_SEARCH_UNREAD}</span>
								</a>
							</li>
						<!-- ENDIF -->
							<li>
								<a href="{U_SEARCH_UNANSWERED}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-gray" aria-hidden="true"></i><span>{L_SEARCH_UNANSWERED}</span>
								</a>
							</li>
							<li>
								<a href="{U_SEARCH_ACTIVE_TOPICS}" role="menuitem">
									<i class="icon fa-file-o fa-fw icon-blue" aria-hidden="true"></i><span>{L_SEARCH_ACTIVE_TOPICS}</span>
								</a>
							</li>
							<li class="separator"></li>
							<li>
								<a href="{U_SEARCH}" role="menuitem">
									<i class="icon fa-search fa-fw" aria-hidden="true"></i><span>{L_SEARCH}</span>
								</a>
							</li>
					<!-- ENDIF -->

					<!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
						<li class="separator"></li>
						<!-- IF S_DISPLAY_MEMBERLIST -->
							<li>
								<a href="{U_MEMBERLIST}" role="menuitem">
									<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>{L_MEMBERLIST}</span>
								</a>
							</li>
						<!-- ENDIF -->
						<!-- IF U_TEAM -->
							<li>
								<a href="{U_TEAM}" role="menuitem">
									<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>{L_THE_TEAM}</span>
								</a>
							</li>
						<!-- ENDIF -->
					<!-- ENDIF -->
					<li class="separator"></li>

					<!-- EVENT navbar_header_quick_links_after -->
				</ul>
			</div>
		</li>

		<!-- EVENT overall_header_navigation_prepend -->
		<li <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->>
			<a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">
				<i class="icon fa-question-circle fa-fw" aria-hidden="true"></i><span>{L_FAQ}</span>
			</a>
		</li>
		<!-- EVENT overall_header_navigation_append -->
		<!-- IF not S_IS_BOT -->
		<li  data-skip-responsive="true">
					<a href="https://www.facebook.com/LeForumRecifal" role="menuitem">
					    <i class="icon fa-facebook-official fa-fw" aria-hidden="true"></i><span>Facebook</span>
				    </a>
			 </li>	    	
		<li  data-skip-responsive="true">
					<a href="SiteMap.php" title="Structure du forum" role="menuitem">
					    <i class="icon fa-light fa-sitemap" aria-hidden="true"></i><span>Site Map</span>
				    </a>
			 </li>	    	
		<li  data-skip-responsive="true">
				<a href="/AllPolls.php" title="Tous les sondages" role="menuitem">
					<i class="icon fa-bar-chart fa-fw" aria-hidden="true"></i><span>Sondages</span>
				</a>
			 </li>	
		<li  data-skip-responsive="true">
				<a href="/Stats.php" title="Statistiques" role="menuitem">
					<i class="icon fa-chart-line fa-fw" aria-hidden="true"></i><span>Stats</span>
				</a>
			 </li>

		<li  data-skip-responsive="true">
				<a href="https://www.leforumrecifal.com/TopicTrack.php?user={S_USERNAME}" title="Mes sujets suivis">
					<i class="icon fa-thumb-tack fa-fw" aria-hidden="true"></i><span>Suivi</span>
				</a>
			 </li>
	    	
		<!-- ENDIF -->	
		<!-- IF U_ACP -->
			<li data-skip-responsive="true">
				<a href="{U_ACP}" title="{L_ACP}" role="menuitem">
					<i class="icon fa-cogs fa-fw" aria-hidden="true"></i><span>{L_ACP_SHORT}</span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF U_MCP -->
			<li  data-skip-responsive="true">
				<a href="{U_MCP}" title="{L_MCP}" role="menuitem">
					<i class="icon fa-gavel fa-fw" aria-hidden="true"></i><span>{L_MCP_SHORT}</span>
				</a>
			</li>
		<!-- ENDIF -->

	<!-- IF S_REGISTERED_USER -->
		<!-- EVENT navbar_header_user_profile_prepend -->
		<li id="username_logged_in" class="rightside <!-- IF CURRENT_USER_AVATAR --> no-bulletin<!-- ENDIF -->" data-skip-responsive="true">
			<!-- EVENT navbar_header_username_prepend -->
			<div class="header-profile dropdown-container">
				<a href="{U_PROFILE}" class="header-avatar dropdown-trigger"><!-- IF CURRENT_USER_AVATAR -->{CURRENT_USER_AVATAR} <!-- ENDIF --> {CURRENT_USERNAME_SIMPLE}</a>
				<div class="dropdown">
					<div class="pointer"><div class="pointer-inner"></div></div>
					<ul class="dropdown-contents" role="menu">
						<!-- IF U_RESTORE_PERMISSIONS -->
							<li>
								<a href="{U_RESTORE_PERMISSIONS}">
									<i class="icon fa-refresh fa-fw" aria-hidden="true"></i><span>{L_RESTORE_PERMISSIONS}</span>
								</a>
							</li>
						<!-- ENDIF -->

					<!-- EVENT navbar_header_profile_list_before -->

						<li>
							<a href="{U_PROFILE}" title="{L_PROFILE}" role="menuitem">
								<i class="icon fa-sliders fa-fw" aria-hidden="true"></i><span>{L_PROFILE}</span>
							</a>
						</li>
						<!-- IF U_USER_PROFILE -->
							<li>
								<a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}" role="menuitem">
									<i class="icon fa-user fa-fw" aria-hidden="true"></i><span>{L_READ_PROFILE}</span>
								</a>
							</li>
						<!-- ENDIF -->

						<!-- EVENT navbar_header_profile_list_after -->

						<li class="separator"></li>
						<li>
							<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
								<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- EVENT navbar_header_username_append -->
		</li>
		<!-- IF S_DISPLAY_PM -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_PRIVATEMSGS}" role="menuitem">
					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span>{L_PRIVATE_MESSAGES} </span><strong class="badge<!-- IF not PRIVATE_MESSAGE_COUNT --> hidden<!-- ENDIF -->">{PRIVATE_MESSAGE_COUNT}</strong>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- IF S_NOTIFICATIONS_DISPLAY -->
			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span>{L_NOTIFICATIONS} </span><strong class="badge<!-- IF not NOTIFICATIONS_COUNT --> hidden<!-- ENDIF -->">{NOTIFICATIONS_COUNT}</strong>
				</a>
				<!-- INCLUDE notification_dropdown.html -->
			</li>
		<!-- ENDIF -->
		<!-- EVENT navbar_header_user_profile_append -->
	<!-- ELSE IF not S_IS_BOT -->
		<li class="rightside"  data-skip-responsive="true">
			<a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x" role="menuitem">
				<i class="icon fa-power-off fa-fw" aria-hidden="true"></i><span>{L_LOGIN_LOGOUT}</span>
			</a>
		</li>
		<!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
			<li class="rightside" data-skip-responsive="true">
				<a href="{U_REGISTER}" role="menuitem">
					<i class="icon fa-pencil-square-o  fa-fw" aria-hidden="true"></i><span>{L_REGISTER}</span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- EVENT navbar_header_logged_out_content -->
	<!-- ENDIF -->
	</ul>

	<ul id="nav-breadcrumbs" class="nav-breadcrumbs linklist navlinks" role="menubar">
		{% set MICRODATA = 'itemtype="https://schema.org/ListItem" itemprop="itemListElement" itemscope' %}
		{% set navlink_position = 1 %}

		{% EVENT overall_header_breadcrumbs_before %}

		<li class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">

			{% if U_SITE_HOME %}
				<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_SITE_HOME }}" data-navbar-reference="home"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="name">{{ L_SITE_HOME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
			{% endif %}

			{% EVENT overall_header_breadcrumb_prepend %}
				<span class="crumb" {{ MICRODATA }}><a itemprop="item" href="{{ U_INDEX }}" accesskey="h" data-navbar-reference="index">{% if not U_SITE_HOME %}<i class="icon fa-home fa-fw"></i>{% endif %}<span itemprop="name">{{ L_INDEX }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>

			{% for navlink in navlinks %}
				{% set NAVLINK_NAME = navlink.BREADCRUMB_NAME | default(navlink.FORUM_NAME) %}
				{% set NAVLINK_LINK = navlink.U_BREADCRUMB | default(navlink.U_VIEW_FORUM) %}

				{% EVENT overall_header_navlink_prepend %}
				<span class="crumb" {{ MICRODATA }}{% if navlink.MICRODATA %} {{ navlink.MICRODATA }}{% endif %}><a itemprop="item" href="{{ NAVLINK_LINK }}"><span itemprop="name">{{ NAVLINK_NAME }}</span></a><meta itemprop="position" content="{{ navlink_position }}{% set navlink_position = navlink_position + 1 %}" /></span>
				{% EVENT overall_header_navlink_append %}
			{% endfor %}

			{% EVENT overall_header_breadcrumb_append %}
		</li>

		{% EVENT overall_header_breadcrumbs_after %}

		{% if S_DISPLAY_SEARCH and not S_IN_SEARCH %}
			<li class="rightside responsive-search">
				<a href="{{ U_SEARCH }}" title="{{ lang('SEARCH_ADV_EXPLAIN') }}" role="menuitem">
					<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{{ lang('SEARCH') }}</span>
				</a>
			</li>
		{% endif %}
	</ul>

	</div>
</div>

[Mannix_]

this looks like edited with the changes i said you should do. I replaced my stock navbar_header.html file with what you posted here and it works as you expect. Can you post a screenshot or a link so we can see what is going on??

[Hervé]

Yes, sorry, I gave you the version where I have replaced all data-last-responsive="true" by data-skip-responsive="true".
This this the original Navbar without "Notifications" and "Private messages" texts
and below with the css and navbar_header.html modifications

[Mannix_]

Honestly have no idea what is going on

EDIT: a different approach try
changing
'.linklist:not(.navlinks, [data-skip-responsive]),' to '.linklist:not(.nav-main, .navlinks, [data-skip-responsive]),' in forum_fn.js

[Hervé]

This does not change anything.
I have a feedback from the extension author, he is searching ...