closes #1141

public/src/forum/topic.js

@@ -12,8 +12,8 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 
 	$(window).on('action:ajaxify.start', function(ev, data) {
 		if(data.url.indexOf('topic') !== 0) {
-			$('.pagination-block').addClass('hide');
-			$('#header-topic-title').html('').hide();
+			$('.pagination-block').addClass('hidden');
+			$('.header-topic-title').find('span').text('').hide();
 			app.removeAlert('bookmark');
 		}
 	});
@@ -342,7 +342,7 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 
 		function enableInfiniteLoading() {
 			if(!config.usePagination) {
-				$('.pagination-block').removeClass('hide');
+				$('.pagination-block').removeClass('hidden');
 
 				app.enableInfiniteLoading(function(direction) {
 
@@ -372,7 +372,7 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 					}
 				});
 			} else {
-				$('.pagination-block').addClass('hide');
+				$('.pagination-block').addClass('hidden');
 
 				pagination.init(currentPage, pageCount);
 			}
@@ -1026,9 +1026,9 @@ define(['composer', 'forum/pagination'], function(composer, pagination) {
 		});
 
 		if($(window).scrollTop() > 50) {
-			$('#header-topic-title').text(templates.get('topic_name')).show();
+			$('.header-topic-title').find('span').text(templates.get('topic_name')).show();
 		} else {
-			$('#header-topic-title').text('').hide();
+			$('.header-topic-title').find('span').text('').hide();
 		}
 
 		$($('.posts > .post-row').get().reverse()).each(function() {

public/templates/header.tpl

@@ -60,11 +60,16 @@
 					<a href="{relative_path}/">
 						<h1 class="navbar-brand forum-title">{title}</h1>
 					</a>
+
+					<div class="header-topic-title visible-xs">
+						<span></span>
+					</div>
+
 				</div>
 			</div>
 
 			<div class="navbar-collapse collapse navbar-ex1-collapse">
-				<ul id="main-nav" class="nav navbar-nav">
+				<ul id="main-nav" class="nav navbar-nav pull-left">
 					<li class="nodebb-loggedin">
 						<a href="{relative_path}/unread"><i id="unread-count" class="fa fa-fw fa-inbox" data-content="0" title="[[global:header.unread]]"></i><span class="visible-xs-inline"> [[global:header.unread]]</span></a>
 					</li>
@@ -104,7 +109,7 @@
 					<!-- END navigation -->
 				</ul>
 
-				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide">
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right hide pull-right">
 					<li>
 						<a href="#" id="reconnect" class="hide" title="Connection to {title} has been lost, attempting to reconnect..."><i class="fa fa-check"></i></a>
 					</li>
@@ -121,8 +126,8 @@
 						<a href="{relative_path}/notifications"><i class="fa fa-exclamation-triangle fa-fw" title="[[notifications:title]]"></i> [[notifications:title]]</a>
 					</li>
 
-					<li class="chats dropdown text-center hidden-xs">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="chat_dropdown"><i class="fa fa-comment-o" title="[[global:header.chats]]"></i></a>
+					<li class="chats dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="chat_dropdown"><i class="fa fa-comment-o fa-fw" title="[[global:header.chats]]"></i> <span class="visible-xs-inline">[[global:header.chats]]</span></a>
 						<ul id="chat-list" class="dropdown-menu" aria-labelledby="chat_dropdown">
 							<li>
 								<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:chats.loading]]</a>
@@ -156,10 +161,9 @@
 							</li>
 						</ul>
 					</li>
-
 				</ul>
 
-				<ul id="logged-out-menu" class="nav navbar-nav navbar-right">
+				<ul id="logged-out-menu" class="nav navbar-nav navbar-right pull-right">
 					<!-- IF allowRegistration -->
 					<li>
 						<a href="{relative_path}/register">
@@ -192,7 +196,7 @@
 				</ul>
 				<!-- ENDIF searchEnabled -->
 
-				<ul class="nav navbar-nav navbar-right pagination-block hide">
+				<ul class="nav navbar-nav navbar-right pagination-block hidden visible-lg visible-md">
 					<li class="active">
 						<a href="#">
 							<i class="fa fa-chevron-up pointer"></i>
@@ -205,8 +209,8 @@
 					</li>
 				</ul>
 
-				<div class="header-topic-title pull-right hidden-md-inline">
-					<span id="header-topic-title"></span>
+				<div class="header-topic-title pull-right hidden-xs">
+					<span></span>
 				</div>
 			</div>
 		</div>