From: Hannes Heute <haheute@posteo.de>
Date: Sat, 14 Jun 2025 13:07:34 +0000 (+0200)
Subject: Fix vier template
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=972315a0befb0ecfebaa3d71e0a8c54d62b276a4;p=friendica.git

Fix vier template
---

diff --git a/view/js/main.js b/view/js/main.js
index e8f60bd08d..831e26f4c9 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -512,7 +512,7 @@ function NavUpdate() {
 					var update_url = 'ping_network?ping=1';
 					$.get(update_url, function(net) {
 						updateCounter('net', net);
-					});			
+					});
 				}
 
 				if ($('#live-photos').length) {
diff --git a/view/lang/C/messages.po b/view/lang/C/messages.po
index ea269e5c6f..4aa51dc1cd 100644
--- a/view/lang/C/messages.po
+++ b/view/lang/C/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: 2025.02-dev\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-06-04 09:41+0000\n"
+"POT-Creation-Date: 2025-06-14 15:06+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
diff --git a/view/theme/vier/breathe.css b/view/theme/vier/breathe.css
index 2b5fbc8767..008ee2563a 100644
--- a/view/theme/vier/breathe.css
+++ b/view/theme/vier/breathe.css
@@ -33,38 +33,39 @@ header #banner a:hover {
   color: #737373;
 }
 
-nav {
+nav#topbar-first {
    background: #eeeeee;
 }
 
-nav .icon {
+nav#topbar-first .icon {
   color: #737373;
 }
 
-nav a:active,
-nav a:visited,
-nav a:link,
-nav a:hover .icon,
-nav a {
+nav#topbar-first a:active,
+nav#topbar-first a:visited,
+nav#topbar-first a:link,
+nav#topbar-first a:hover .icon,
+nav#topbar-first a {
   color: #737373;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
   border-radius: 5px;
 }
 
-nav .nav-menu.selected {
+nav#topbar-first .nav-menu.selected {
   border-bottom: 3px solid #737373;
 }
 
-nav .nav-menu-icon.selected {
+nav#topbar-first .nav-menu-icon.selected {
   background-color: #eeeeee;
 }
 
-nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+nav#topbar-first #nav-notifications-linkmenu.on .icon.s22.notify, nav#topbar-first #nav-notifications-linkmenu.selected .icon.s22.notify {
   color: #737373;
 }
 
+nav#topbar-first ul.menu-popup,
 ul.menu-popup {
   border: 1px solid #364e59;
   border-radius: 5px;
diff --git a/view/theme/vier/dark.css b/view/theme/vier/dark.css
index 20dfa15680..f725eee0a9 100644
--- a/view/theme/vier/dark.css
+++ b/view/theme/vier/dark.css
@@ -4,15 +4,15 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-*{ 
+*{
 	box-shadow: 0 0 0 0 !important;
 	border-color: #343434 !important;
 }
 
 hr { background-color: #343434 !important; }
 
-a, .wall-item-name, .fakelink { 
-	color: #989898 !important; 
+a, .wall-item-name, .fakelink {
+	color: #989898 !important;
 }
 
 .wall-item-content a {
@@ -30,12 +30,12 @@ a, .wall-item-name, .fakelink {
 	text-shadow: none;
 }
 
-nav { 
+nav#topbar-first {
 	color: #989898 !important;
-	background-color: #1C2126 !important; 
+	background-color: #1C2126 !important;
 }
 
-nav .nav-notification {
+nav#topbar-first .nav-notification {
 	background-color: #2C77AE !important
 }
 
@@ -50,7 +50,7 @@ aside, right_aside, .menu-popup, .fc-state-highlight, a.off, .autocomplete {
 	border-right: 1px solid #D2D2D2;
 }
 
-body, section, blockquote, blockquote.shared_content, #profile-jot-form, 
+body, section, blockquote, blockquote.shared_content, #profile-jot-form,
 .dspr, .twit, .pump, .dfrn, .tread-wrapper, code, .mail-list-wrapper, div.pager, ul.tabs {
 	color: #989898 !important;
 	background-color: #171B1F !important;
diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index baae5cbfd3..5f59271ed2 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -21,7 +21,7 @@ section {
   padding: 5px;
 }
 
-body, section, nav .nav-menu, div.pager, ul.tabs {
+body, section, nav#topbar-first .nav-menu, div.pager, ul.tabs {
   font-size: 16px;
 }
 
@@ -29,7 +29,7 @@ body, section, nav .nav-menu, div.pager, ul.tabs {
   font-size: 13px;
 }
 
-nav {
+nav#topbar-first {
   min-width: 100%;
 }
 
@@ -41,7 +41,7 @@ nav {
   padding-top: 25px; */
 }
 
-nav ul {
+nav#topbar-first ul {
     margin-left: 0px;
 }
 
@@ -111,7 +111,7 @@ nav ul {
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 200px;
   }
-  /* fix img width in threaded view - maybe there exists a better possibility to do this 
+  /* fix img width in threaded view - maybe there exists a better possibility to do this
     maybe this needs also to be done for tablet view*/
   .children .wall-item-container .wall-item-item .wall-item-content img {
     max-width: 100%;
@@ -124,9 +124,9 @@ nav ul {
     max-width: 100%;
   }
 
-  
+
   /* the top-nav notification menu */
-  nav #nav-notifications-linkmenu .menu-popup {
+  nav#topbar-first #nav-notifications-linkmenu .menu-popup {
 	position: fixed;
 	left: 10px;
 	right: 10px;
@@ -136,7 +136,7 @@ nav ul {
 	max-width: none;
 	max-height: none;
   }
-  
+
 
 }
 
@@ -228,7 +228,7 @@ aside.show {
     margin: 0 1em 1em 0;
 }
 #profile-jot-submit-wrapper > div#profile-jot-perms { margin: 0; }
- 
+
 /* ACL window */
 #profile-jot-acl-wrapper, #profile-jot-acl-wrapper * { box-sizing: border-box; }
 #acl-wrapper { width: 100%; float: none; }
@@ -246,7 +246,7 @@ aside.show {
   -moz-flex-flow: column;
   -ms-flex-flow: column;
   flex-flow: column;
-  
+
   -webkit-flex: 1 100%;
   -moz-flex: 1 100%;
   -ms-flex: 1 100%;
diff --git a/view/theme/vier/narrow.css b/view/theme/vier/narrow.css
index e36f2630ef..f0e8389813 100644
--- a/view/theme/vier/narrow.css
+++ b/view/theme/vier/narrow.css
@@ -8,11 +8,11 @@
   display: none;
 }
 
-nav ul li .menu-popup {
+nav#topbar-first ul li .menu-popup {
   left: auto;
   right: 0px;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
   width: 100px;
 }
diff --git a/view/theme/vier/plus.css b/view/theme/vier/plus.css
index d186d90061..f56f843088 100644
--- a/view/theme/vier/plus.css
+++ b/view/theme/vier/plus.css
@@ -4,21 +4,21 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-nav {
+nav#topbar-first {
   background: #fff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-nav a:active,
-nav a:link,
-nav a:visited,
-nav a {
+nav#topbar-first a:active,
+nav#topbar-first a:link,
+nav#topbar-first a:visited,
+nav#topbar-first a {
   color: #737373;
 }
 
-nav a:hover,
+nav#topbar-first a:hover,
 #nav-messages-see-all a:hover {
   color: #000;
 }
@@ -29,7 +29,7 @@ nav a:hover,
   font: bold 11px/16px Arial;
 }
 
-nav .nav-notification {
+nav#topbar-first .nav-notification {
 /*  background-color: #427FED; */
   background-color: #CB4437;
   top: -3px;
@@ -39,21 +39,21 @@ nav .nav-notification {
   border-radius: 10px;
 }
 
-nav .nav-menu-icon .nav-notification {
+nav#topbar-first .nav-menu-icon .nav-notification {
   top: 0px;
 }
 
-nav .nav-menu.selected a {
+nav#topbar-first .nav-menu.selected a {
   color: #000;
 /*  font-weight: bold; */
 }
 
-nav .nav-menu:hover,
-nav .nav-menu.selected {
+nav#topbar-first .nav-menu:hover,
+nav#topbar-first .nav-menu.selected {
   border-bottom: 2px solid #427FED;
 }
 
-nav .nav-menu {
+nav#topbar-first .nav-menu {
   height: 23px;
   font-size: 14px;
   font-weight: initial;
@@ -78,20 +78,20 @@ ul.tabs li .active, span.pager_current a {
   border-bottom: 2px solid #427FED;
 }
 
-span.pager_current, span.pager_n a:hover, 
-span.pager_first a:hover, span.pager_last a:hover, 
+span.pager_current, span.pager_n a:hover,
+span.pager_first a:hover, span.pager_last a:hover,
 span.pager_prev a:hover, span.pager_next a:hover,
 ul.tabs a:hover {
   border-bottom: 2px solid #427FED;
 }
 
-nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+nav#topbar-first #nav-notifications-linkmenu.on .icon.s22.notify, nav#topbar-first #nav-notifications-linkmenu.selected .icon.s22.notify {
   color: #737373;
 }
 
-nav #nav-messages-linkmenu.selected,
-nav #nav-user-linklabel.selected,
-nav #nav-apps-link.selected {
+nav#topbar-first #nav-messages-linkmenu.selected,
+nav#topbar-first #nav-user-linklabel.selected,
+nav#topbar-first #nav-apps-link.selected {
   background-color: #fff;
   border-bottom-style: none;
 }
@@ -115,7 +115,7 @@ div.pager, ul.tabs {
   font-weight: initial;
 }
 
-nav .nav-menu-icon.selected {
+nav#topbar-first .nav-menu-icon.selected {
   background-color: #fff;
 }
 
@@ -123,14 +123,15 @@ nav .nav-menu-icon.selected {
   background-color: #fff;
 }
 
-nav .icon {
+nav#topbar-first .icon {
   color: #737373;
 }
 
-nav a:hover .icon {
+nav#topbar-first a:hover .icon {
   color: #000;
 }
 
+nav#topbar-first ul.menu-popup,
 ul.menu-popup {
   border: 0px solid #FFF;
   margin-top: 0px;
@@ -165,7 +166,7 @@ section {
   top: 44px;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
   background-color: initial;
   border-style: solid;
   border-width: 1px;
diff --git a/view/theme/vier/plusminus.css b/view/theme/vier/plusminus.css
index 51ab53a6b7..63d46876cb 100644
--- a/view/theme/vier/plusminus.css
+++ b/view/theme/vier/plusminus.css
@@ -41,21 +41,21 @@ h5 {
 
 /* Left Column*/
 
-nav {
+nav#topbar-first {
   background: #fff;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-nav a:active,
-nav a:link,
-nav a:visited,
-nav a {
+nav#topbar-first a:active,
+nav#topbar-first a:link,
+nav#topbar-first a:visited,
+nav#topbar-first a {
   color: #737373;
 }
 
-nav a:hover,
+nav#topbar-first a:hover,
 #nav-messages-see-all a:hover {
   color: #000;
 }
@@ -66,7 +66,7 @@ nav a:hover,
   font: bold 11px/16px Arial;
 }
 
-nav .nav-notification {
+nav#topbar-first .nav-notification {
   background-color: #CB4437;
   top: -3px;
   right: -4px;
@@ -75,20 +75,20 @@ nav .nav-notification {
   border-radius: 10px;
 }
 
-nav .nav-menu-icon .nav-notification {
+nav#topbar-first .nav-menu-icon .nav-notification {
   top: 0px;
 }
 
-nav .nav-menu.selected a {
+nav#topbar-first .nav-menu.selected a {
   color: #000;
 }
 
-nav .nav-menu:hover,
-nav .nav-menu.selected {
+nav#topbar-first .nav-menu:hover,
+nav#topbar-first .nav-menu.selected {
   border-bottom: 2px solid #427FED;
 }
 
-nav .nav-menu {
+nav#topbar-first .nav-menu {
   height: 23px;
   font-size: 14px;
   font-weight: initial;
@@ -113,20 +113,20 @@ ul.tabs li .active, span.pager_current a {
   border-bottom: 2px solid #427FED;
 }
 
-span.pager_current, span.pager_n a:hover, 
-span.pager_first a:hover, span.pager_last a:hover, 
+span.pager_current, span.pager_n a:hover,
+span.pager_first a:hover, span.pager_last a:hover,
 span.pager_prev a:hover, span.pager_next a:hover,
 ul.tabs a:hover {
   border-bottom: 2px solid #427FED;
 }
 
-nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+nav#topbar-first #nav-notifications-linkmenu.on .icon.s22.notify, nav#topbar-first #nav-notifications-linkmenu.selected .icon.s22.notify {
   color: #737373;
 }
 
-nav #nav-messages-linkmenu.selected,
-nav #nav-user-linklabel.selected,
-nav #nav-apps-link.selected {
+nav#topbar-first #nav-messages-linkmenu.selected,
+nav#topbar-first #nav-user-linklabel.selected,
+nav#topbar-first #nav-apps-link.selected {
   background-color: #fff;
   border-bottom-style: none;
 }
@@ -172,7 +172,7 @@ div.pager, ul.tabs {
   font-weight: initial;
 }
 
-nav .nav-menu-icon.selected {
+nav#topbar-first .nav-menu-icon.selected {
   background-color: #fff;
 }
 
@@ -180,11 +180,11 @@ nav .nav-menu-icon.selected {
   background-color: #fff;
 }
 
-nav .icon {
+nav#topbar-first .icon {
   color: #737373;
 }
 
-nav a:hover .icon {
+nav#topbar-first a:hover .icon {
   color: #000;
 }
 
@@ -218,7 +218,7 @@ section {
   top: 44px;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
   background-color: initial;
   border-style: solid;
   border-width: 1px;
@@ -387,7 +387,7 @@ div.pager, ul.tabs {
 }
 
 .contact-menu {
-  font-size:12px; 
+  font-size:12px;
   padding-top:0px;
   padding-bottom:0px;
 }
@@ -418,7 +418,7 @@ div.pager, ul.tabs {
 .fakelink {
   color: #36c;
   text-decoration: none;
-  font-size: 10px; 
+  font-size: 10px;
   cursor: pointer;
 }
 
@@ -435,24 +435,24 @@ div.pager, ul.tabs {
 
 #new-event-link a {
   text-decoration: none;
-  padding:0px 10px; 
+  padding:0px 10px;
   color:white;
-  background:#6c82ff; 
+  background:#6c82ff;
   border:1px solid darkgrey;
   cursor:pointer;
   -webkit-border-radius: 5px;
-  border-radius: 5px; 
+  border-radius: 5px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.24);
 }
 
 #new-event-link a:hover {
-  background:#0026ff; 
+  background:#0026ff;
 }
 
 .fc-content, .fc-widget {
-  background-color: #a7ecff; 
+  background-color: #a7ecff;
   font-size:10px;
   color: black;
   text-decoration: normal;
@@ -474,8 +474,8 @@ div.pager, ul.tabs {
   font-weight: normal;
 }
 
-.fc-title, .fc-time { 
-  text-decoration: normal; 
+.fc-title, .fc-time {
+  text-decoration: normal;
 }
 
 .fc-unthemed .fc-today { background: #f9ff97; }
@@ -511,7 +511,7 @@ select {
   appearance: none;
   border:1px;
   border-radius: 5px;
-} 
+}
 
 option {
   background:white;
@@ -586,12 +586,12 @@ select{
 }
 
 textarea {
-  padding:2px 2px; 
-  background:white; 
+  padding:2px 2px;
+  background:white;
   border:1px solid darkgrey;
   cursor:text;
   -webkit-border-radius: 5px;
-  border-radius: 5px; 
+  border-radius: 5px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
 }
@@ -623,7 +623,7 @@ textarea:focus {
 /* Admin user page */
 
 #users {
-  font-size: 12px; 
+  font-size: 12px;
 }
 
 .users_ckbx {
@@ -682,15 +682,16 @@ td.checkbox, td.tools{
   left: 35px;
   width: 24em;
   margin-top: 0px;
-  font-size: 12px; 
+  font-size: 12px;
   border: 0px solid lightgrey;
 }
 
+nav#topbar-first ul.menu-popup,
 ul.menu-popup {
   width: 20em;
   margin-top: 0px;
   padding: 0px;
-  font-size: 12px; 
+  font-size: 12px;
   line-height:10px;
   border: 0px solid lightgrey;
 }
@@ -706,29 +707,29 @@ ul.menu-popup {
 /* Buttons */
 
 input[type=submit] {
-  padding:0px 10px; 
+  padding:0px 10px;
   color:white;
-  background:#6c82ff; 
+  background:#6c82ff;
   border:1px solid darkgrey;
   cursor:pointer;
   -webkit-border-radius: 5px;
-  border-radius: 5px; 
+  border-radius: 5px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
   box-shadow: 2px 2px 15px 0 rgba(0,0,0,0.24);
 }
 
 input[type=submit]:hover {
-  background:#0026ff; 
+  background:#0026ff;
 }
 
 input[type=text], input[type=password], input[type=email], input[type=url] {
-  padding:2px 2px; 
-  background:white; 
+  padding:2px 2px;
+  background:white;
   border:1px solid darkgrey;
   cursor:text;
   -webkit-border-radius: 5px;
-  border-radius: 5px; 
+  border-radius: 5px;
   -webkit-transition-duration: 0.4s; /* Safari */
   transition-duration: 0.4s;
 }
@@ -756,7 +757,7 @@ input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, inp
   padding-bottom:0px;
   border: 0px solid #FFF;
   margin-top: 0px;
-  font-size: 12px; 
+  font-size: 12px;
   line-height: 10px;
 }
 
diff --git a/view/theme/vier/shadow.css b/view/theme/vier/shadow.css
index aae02d82ea..9353a9d273 100644
--- a/view/theme/vier/shadow.css
+++ b/view/theme/vier/shadow.css
@@ -4,26 +4,26 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-nav {
+nav#topbar-first {
   background: rgb(36, 76, 94);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
   padding: 0px;
   padding-left: 0px;
 }
 
-nav a:active,
-nav a:link,
-nav a:visited,
-nav a {
+nav#topbar-first a:active,
+nav#topbar-first a:link,
+nav#topbar-first a:visited,
+nav#topbar-first a {
   color: #ccc;
 }
 
-nav a:hover,
+nav#topbar-first a:hover,
 #nav-messages-see-all a:hover {
   color: #fff;
 }
 
-nav .nav-notification {
+nav#topbar-first .nav-notification {
   background-color: #F80;
   top: 0px;
   right: -5px;
@@ -31,21 +31,21 @@ nav .nav-notification {
   border-radius: 5px 5px 5px 5px;
 }
 
-nav .nav-menu-icon .nav-notification {
+nav#topbar-first .nav-menu-icon .nav-notification {
   top: 0px;
 }
 
-nav .nav-menu.selected a {
+nav#topbar-first .nav-menu.selected a {
   color: #000;
 /*  font-weight: bold; */
 }
 
-nav .nav-menu:hover,
-nav .nav-menu.selected {
+nav#topbar-first .nav-menu:hover,
+nav#topbar-first .nav-menu.selected {
   border-bottom: 2px solid #427FED;
 }
 
-nav .nav-menu {
+nav#topbar-first .nav-menu {
   height: 23px;
   font-size: 14px;
   font-weight: initial;
@@ -69,20 +69,20 @@ ul.tabs li .active, span.pager_current a {
   border-bottom: 2px solid #427FED;
 }
 
-span.pager_current, span.pager_n a:hover, 
-span.pager_first a:hover, span.pager_last a:hover, 
+span.pager_current, span.pager_n a:hover,
+span.pager_first a:hover, span.pager_last a:hover,
 span.pager_prev a:hover, span.pager_next a:hover,
 ul.tabs a:hover {
   border-bottom: 2px solid #427FED;
 }
 
-nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+nav#topbar-first #nav-notifications-linkmenu.on .icon.s22.notify, nav#topbar-first #nav-notifications-linkmenu.selected .icon.s22.notify {
   color: #737373;
 }
 
-nav #nav-messages-linkmenu.selected,
-nav #nav-user-linklabel.selected,
-nav #nav-apps-link.selected {
+nav#topbar-first #nav-messages-linkmenu.selected,
+nav#topbar-first #nav-user-linklabel.selected,
+nav#topbar-first #nav-apps-link.selected {
   background-color: #fff;
   border-bottom-style: none;
 }
@@ -106,7 +106,7 @@ div.pager, ul.tabs {
   font-weight: initial;
 }
 
-nav .nav-menu-icon.selected {
+nav#topbar-first .nav-menu-icon.selected {
   background-color: #fff;
 }
 
@@ -114,14 +114,15 @@ nav .nav-menu-icon.selected {
   background-color: #fff;
 }
 
-nav .icon {
+nav#topbar-first .icon {
   color: #737373;
 }
 
-nav a:hover .icon {
+nav#topbar-first a:hover .icon {
   color: #000;
 }
 
+nav#topbar-first ul.menu-popup,
 ul.menu-popup {
   border: 0px solid #FFF;
   margin-top: 0px;
@@ -152,7 +153,7 @@ section {
   top: 44px;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
   background-color: initial;
   border-style: solid;
   border-width: 1px;
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index 8a9d9722d6..48e933f7d8 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -340,7 +340,11 @@ a:hover {
 	vertical-align: baseline;
 	outline-offset: 0;
 }
-
+button.fakelink {
+	background: none;
+	text-align: left;
+	border: none;
+}
 pre code {
 	font-family: Courier, monospace;
 	white-space: pre;
@@ -595,8 +599,8 @@ header #banner #logo-img {
 header #banner #logo-text {
 	font-size: 22px;
 }
-/* nav */
-nav {
+/* nav#topbar-first */
+nav#topbar-first {
 	min-width: 1000px;
 	width: 100%;
 	height: 32px;
@@ -620,15 +624,15 @@ nav {
 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
 }
 
-nav .icon {
+nav#topbar-first .icon {
 	color: #ccc;
 	padding:0;
 }
 
-nav a:active,
-nav a:visited,
-nav a:link,
-nav a {
+nav#topbar-first a:active,
+nav#topbar-first a:visited,
+nav#topbar-first a:link,
+nav#topbar-first a {
 	text-decoration: none;
 	outline: none;
 	color: #ccc;
@@ -637,11 +641,11 @@ nav a {
 	cursor: pointer;
 }
 
-nav a:hover .icon {
+nav#topbar-first a:hover .icon {
 	color: #fff;
 }
 
-nav a:hover {
+nav#topbar-first a:hover {
 	text-decoration: none;
 	outline: none;
 	color: #fff;
@@ -649,22 +653,22 @@ nav a:hover {
 	padding-top: 8px;
 }
 
-nav ul {
+nav#topbar-first ul {
 	margin: 0px;
 	padding: 0px 10px;
 }
-nav ul li {
+nav#topbar-first ul li {
 	list-style: none;
 	margin: 0px;
 	/* padding: 1px 1px 3px 1px; */
 	float: left;
 }
-nav ul li .menu-popup {
+nav#topbar-first ul li .menu-popup {
 	left: 0px;
 	right: auto;
 }
 
-nav #nav-search-box #nav-search-text {
+nav#topbar-first #nav-search-box #nav-search-text {
 	/*background-image:  url('icons/lupe.png');
 	background-repeat:no-repeat; */
 	padding-left:0px;
@@ -680,7 +684,7 @@ nav #nav-search-box #nav-search-text {
 	background-color: #eee;
 }
 
-nav .nav-menu-icon {
+nav#topbar-first .nav-menu-icon {
 	position: relative;
 	height: 22px;
 	padding: 5px;
@@ -689,32 +693,32 @@ nav .nav-menu-icon {
 	-webkit-border-radius: 5px 5px 0 0;
 	border-radius: 5px 5px 0 0;
 }
-nav .nav-menu-icon.selected {
+nav#topbar-first .nav-menu-icon.selected {
 	background-color: #364e59;
 }
-nav .nav-menu img,
-nav .nav-menu-icon img {
+nav#topbar-first .nav-menu img,
+nav#topbar-first .nav-menu-icon img {
 	width: 22px;
 	height: 22px;
 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 	border-radius: 4px;
 }
-nav .nav-menu img {
+nav#topbar-first .nav-menu img {
 	margin-top: -3px;
 	margin-right: 4px;
 }
 
-nav .nav-menu > a > .nav-notification,
-nav .nav-menu-icon > a > .nav-notification {
+nav#topbar-first .nav-menu > a > .nav-notification,
+nav#topbar-first .nav-menu-icon > a > .nav-notification {
 	position: absolute;
 	top: 3px;
 	right: -5px;
 }
-nav .nav-menu-label {
+nav#topbar-first .nav-menu-label {
 	margin: 3px 5px 0px;
 }
-nav .nav-menu {
+nav#topbar-first .nav-menu {
 	position: relative;
 	height: 16px;
 	padding: 5px;
@@ -726,16 +730,16 @@ nav .nav-menu {
 	color: #ccc;
 	font-weight: bold;
 }
-/*nav .nav-menu.selected a {
+/*nav#topbar-first .nav-menu.selected a {
 	color: white;
 }*/
 
-nav .nav-menu.selected {
+nav#topbar-first .nav-menu.selected {
 	border-bottom: 3px solid #9eabb0;
 	/* background-color: #364E59; */
 }
 
-nav .nav-menu:hover {
+nav#topbar-first .nav-menu:hover {
 	/* color: #fff !important; */
 	color: #fff;
 	/* text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */
@@ -759,7 +763,7 @@ nav .nav-menu:hover {
 	margin-right: -20px;
 }
 
-nav .nav-notification {
+nav#topbar-first .nav-notification {
 	display: none;
 	background-color: #F80;
 	-moz-border-radius: 5px 5px 5px 5px;
@@ -771,78 +775,79 @@ nav .nav-notification {
 	text-align: center;
 	color: white;
 }
-nav .nav-notification.show {
+nav#topbar-first .nav-notification.show {
 	display: inline-block;
 }
 
-nav #nav-help-link,
-nav #nav-search-link,
-nav #nav-directory-link,
-nav #nav-apps-link,
-nav #nav-apps-link,
-nav #nav-login-link,
-nav #nav-logout-link,
-nav #nav-messages-linkmenu,
-nav #nav-notifications-linkmenu,
-nav #nav-site-linkmenu,
-nav #nav-contacts-linkmenu,
-nav #nav-user-linklabel {
+nav#topbar-first #nav-help-link,
+nav#topbar-first #nav-search-link,
+nav#topbar-first #nav-directory-link,
+nav#topbar-first #nav-apps-link,
+nav#topbar-first #nav-apps-link,
+nav#topbar-first #nav-login-link,
+nav#topbar-first #nav-logout-link,
+nav#topbar-first #nav-messages-linkmenu,
+nav#topbar-first #nav-notifications-linkmenu,
+nav#topbar-first #nav-site-linkmenu,
+nav#topbar-first #nav-contacts-linkmenu,
+nav#topbar-first #nav-user-linklabel {
 	float: right;
 }
-nav #nav-user-linklabel {
+nav#topbar-first #nav-user-linklabel {
 	padding-left: 0px;
 	margin-top: 0px;
 }
-nav #nav-help-link .menu-popup,
-nav #nav-search-link .menu-popup,
-nav #nav-directory-link .menu-popup,
-nav #nav-apps-link .menu-popup,
-nav #nav-notifications-linkmenu .menu-popup,
-nav #nav-contacts-linkmenu .menu-popup,
-nav #nav-site-linkmenu .menu-popup {
+nav#topbar-first #nav-help-link .menu-popup,
+nav#topbar-first #nav-search-link .menu-popup,
+nav#topbar-first #nav-directory-link .menu-popup,
+nav#topbar-first #nav-apps-link .menu-popup,
+nav#topbar-first #nav-notifications-linkmenu .menu-popup,
+nav#topbar-first #nav-user-linkmenu .menu-popup,
+nav#topbar-first #nav-contacts-linkmenu .menu-popup,
+nav#topbar-first #nav-site-linkmenu .menu-popup {
 	right: 0px;
 	left: auto;
 }
-nav #nav-site-linkmenu {
+nav#topbar-first #nav-site-linkmenu {
 	margin-left: 0px;
 	margin-right: 0px;
 }
 .contact-entry-photo:hover .contact-photo-menu,
 .contact-photo-wrapper:hover .menu-popup,
-nav #nav-user-linklabel:hover #nav-user-menu,
-nav #nav-user-linkmenu:hover #nav-user-menu,
-nav #nav-apps-link:hover #nav-apps-menu,
-nav #nav-site-linkmenu:hover #nav-site-menu,
-nav #nav-notifications-linkmenu:hover #nav-notifications-menu,
+nav#topbar-first #nav-user-linklabel:hover #nav-user-menu,
+nav#topbar-first #nav-user-linkmenu:hover #nav-user-menu,
+nav#topbar-first #nav-apps-link:hover #nav-apps-menu,
+nav#topbar-first #nav-site-linkmenu:hover #nav-site-menu,
+nav#topbar-first #nav-notifications-linkmenu:hover #nav-notifications-menu,
 #contact-edit-actions:hover #contact-actions-menu {
 	display:block;
 	visibility:visible;
 	opacity:1;
 }
-nav #nav-notifications-linkmenu {
+nav#topbar-first #nav-notifications-linkmenu {
 	margin-left: 0px;
 	margin-right: 5px;
 }
-nav #nav-notifications-linkmenu.on .icon.s22.notify, nav #nav-notifications-linkmenu.selected .icon.s22.notify {
+nav#topbar-first #nav-notifications-linkmenu.on .icon.s22.notify, nav#topbar-first #nav-notifications-linkmenu.selected .icon.s22.notify {
 	color: white;
 }
-nav #nav-messages-linkmenu.selected,
-nav #nav-user-linklabel.selected,
-nav #nav-apps-link.selected {
+nav#topbar-first #nav-messages-linkmenu.selected,
+nav#topbar-first #nav-user-linklabel.selected,
+nav#topbar-first #nav-apps-link.selected {
 	background-color: #364e59;
 	border-bottom-style: none;
 }
 
-nav #nav-notifications-linkmenu.on .icon-bell:before {
+nav#topbar-first #nav-notifications-linkmenu.on .icon-bell:before {
 	content: "\f0f3";
 }
 
-/* nav #nav-community-link {*/
-nav ul {
+/* nav#topbar-first #nav-community-link {*/
+nav#topbar-first ul {
 	margin-left: 210px;
 }
 
-nav #nav-user-linkmenu {
+nav#topbar-first #nav-user-linkmenu {
 	float: right;
 	padding-left: 0px;
 	padding-right: 0px;
@@ -869,6 +874,7 @@ nav #nav-user-linkmenu {
 	background: none repeat scroll 0 0 #EEE;
 }
 
+nav#topbar-first ul.menu-popup,
 ul.menu-popup {
 	visibility:hidden;
 	opacity:0;
@@ -876,7 +882,7 @@ ul.menu-popup {
 	transition:all 0.2s ease-in-out;
 	/* display: none; */
 	position: absolute;
-	width: 13em;
+	min-width: 13em;
 	background: #ffffff;
 	color: #2d2d2d;
 	margin: 0px;
@@ -885,32 +891,40 @@ ul.menu-popup {
 	border: 3px solid #364e59;
 	z-index: 100000;
 	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
+	font-weight: normal;
+	font-size: 13px;
 }
+nav#topbar-first ul.menu-popup a,
 ul.menu-popup a {
 	display: block;
 	color: #2d2d2d;
 	padding: 5px 10px;
 	text-decoration: none;
 }
+nav#topbar-first ul.menu-popup a:hover,
 ul.menu-popup a:hover {
 	/* background-color: #bdcdd4; */
 	background-color: #e5e5e5;
 }
+nav#topbar-first ul.menu-popup .menu-sep,
 ul.menu-popup .menu-sep {
 	border-top: 1px solid #9eabb0;
 }
+nav#topbar-first ul.menu-popup li,
 ul.menu-popup li {
 	float: none;
 	overflow: auto;
 	height: auto;
 	display: block;
 }
+nav#topbar-first ul.menu-popup li img,
 ul.menu-popup li img {
 	float: left;
 	width: 16px;
 	height: 16px;
 	padding-right: 5px;
 }
+nav#topbar-first ul.menu-popup .empty,
 ul.menu-popup .empty {
 	padding: 5px;
 	text-align: center;
@@ -929,7 +943,7 @@ ul.menu-popup .empty {
 	color: #2d2d2d;
 	max-height: 150px;
 }
-nav .acpopup {
+nav#topbar-first .acpopup {
 	top: 31px !important;
 	margin-left: -23px
 }
diff --git a/view/theme/vier/templates/nav.tpl b/view/theme/vier/templates/nav.tpl
index 9e6c017f1a..231e8ab7a4 100644
--- a/view/theme/vier/templates/nav.tpl
+++ b/view/theme/vier/templates/nav.tpl
@@ -11,7 +11,7 @@
 	<div id="site-location">{{$sitelocation}}</div>
 	<div id="banner">{{$banner nofilter}}</div>
 </header>
-<nav role="menubar">
+<nav id="topbar-first" role="menubar">
 	<ul>
 		<li class="mobile-aside-toggle" style="display:none;">
 			<a href="#">