Simplify CSS for navigation bar

css/navbar.css

@@ -0,0 +1,81 @@
+.main-nav-label, .sub-nav-label {
+    background-color: rgb(67, 67, 67);
+    background-image: none;
+    border-color: rgb(211, 211, 211);
+    border-style: solid;
+    overflow: hidden;
+    width: 140px;
+    height: 27px;
+    padding: 0px;
+    border-width: 0px;
+    border-radius: 0px;
+
+    font-family: "Unica One", sans-serif;
+    font-size: 12pt;
+    font-style: normal;
+    text-decoration: none;
+    text-align: center;
+    color: rgb(243, 243, 243);
+    font-weight: 700;
+
+    display: table-cell;
+    vertical-align: middle;
+}
+
+#imStickyBarContainer {
+    transition: top 0.35s;
+}
+
+.imMnMnCurrent .main-nav-label, .main-nav-label:hover, #imStickyBarObjects .main-nav-label:hover, .sub-nav-label:hover {
+    background-color: rgb(204, 204, 204);
+    background-image: none;
+    border-color: rgb(211, 211, 211);
+    border-style: solid;
+
+    color: rgb(243, 243, 243);
+}
+
+.imMnMnCurrent .main-nav-label {
+    color: rgb(255, 0, 0);
+}
+
+#imStickyBarObjects .main-nav-label {
+    background: transparent;
+    font-weight: normal;
+    width: 141px;
+    height: 31px;
+    padding: 0px 2px;
+}
+
+#imStickyBarObjects .imMnMnCurrent .main-nav-label {
+    background-color: rgb(204, 204, 204);
+    background-image: none;
+    border-color: rgb(211, 211, 211);
+    border-style: solid;
+}
+
+.imLevel .open-bottom {
+    opacity: 0;
+    transition: opacity 1s;
+}
+
+.imLevel .open-bottom li {
+    position: relative;
+    margin-bottom: 0px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.sub-nav-label {
+    width: 143px;
+    height: 28px;
+    padding: 0px 1px;
+    font-weight: normal;
+    text-align: left;
+    font-size: 11pt;
+}
+
+.imLevel:hover > .open-bottom {
+    display: block;
+    opacity: 1;
+}

templates/partials/base.html.twig

@@ -29,6 +29,7 @@
     {% do assets.addCss('theme://css/common.css', 50) %}
     {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_03/custom.css', 40) %}
     {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_05/custom.css', 40) %}
+    {% do assets.addCss('theme://css/navbar.css', 50) %}
 {% endblock %}
 {% block custom_stylesheets %}{% endblock %}
 

templates/partials/header.html.twig

@@ -18,21 +18,13 @@
 			</div>
 			<ul class="menu-mobile-animated hidden">
 				{%- for page in pages.children.visible %}{% set active_page = (page.active or page.activeChild) ? 'imMnMnCurrent' : '' %}<li class="{% if page.isFirst() %} imMnMnFirst {% elseif page.isLast() %} imMnMnLast {% else %} imMnMnMiddle {% endif %} {% if page.children.visible.count > 0 %} imLevel {% else %} imPage {% endif %} {{ active_page }}">
-					<div class="label-wrapper">
+					<a class="main-nav-label" href="{% if page.routable %}{{ page.url(true)|e }}{% else %}#{% endif %}" {% if page.header.external_url %}target="_blank"{% endif %}>{{ page.menu }}</a>
-						<div class="label-inner-wrapper">
-							<a class="label" href="{% if page.routable %}{{ page.url(true)|e }}{% else %}#{% endif %}" {% if page.header.external_url %}target="_blank"{% endif %}>{{ page.menu }}</a>
-						</div>
-					</div>
 					{%- if page.children.visible.count > 0 %}
 					<ul data-original-position="open-bottom" class="open-bottom">
 						{%- for cpage in page.children.visible %}
 						{% set active_cpage = (cpage.active or cpage.activeChild) ? 'imMnMnCurrent' : '' %}
 						<li class="{% if cpage.isFirst() %}imMnMnFirst{% elseif cpage.isLast() %}imMnMnLast{% else %}imMnMnMiddle{% endif %} imLevel {{ active_cpage }}">
-							<div class="label-wrapper">
+							<a class="sub-nav-label" href="{{ cpage.url(true)|e }}" {% if cpage.header.external_url %}target="_blank"{% endif %}>{{ cpage.menu }}</a>
-								<div class="label-inner-wrapper">
-									<a class="label" href="{{ cpage.url(true)|e }}" {% if cpage.header.external_url %}target="_blank"{% endif %}>{{ cpage.menu }}</a>
-								</div>
-							</div>
 						</li>
 						{% endfor -%}
 					</ul>