Website
/
GravTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplify CSS for navigation bar

main
Anonymous Contributor 2023-09-12 08:11:02 +02:00
parent c70ae88a2a
commit 37341db3c4
3 changed files with 84 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
css/navbar.css Normal file
View File

@ -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;
}

1
templates/partials/base.html.twig
View File

@ -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 %}

12
templates/partials/header.html.twig
View File

@ -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">
<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>
<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>
{%- 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">
<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>
<a class="sub-nav-label" href="{{ cpage.url(true)|e }}" {% if cpage.header.external_url %}target="_blank"{% endif %}>{{ cpage.menu }}</a>
</li>
{% endfor -%}
</ul>