try to have a more responsive nav bar -> works till mobile view...
This commit is contained in:
parent
a0bc7544d3
commit
b406b71bdb
|
|
@ -28,16 +28,32 @@ Disroot Media Queries
|
|||
}
|
||||
|
||||
/* nav-wrap */
|
||||
ul#nav li a {
|
||||
padding: 8px 8%;
|
||||
}
|
||||
|
||||
#nav-logo {
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
#nav-logo {
|
||||
height: 35px;
|
||||
width: 10%;
|
||||
background-size: 30px;
|
||||
}
|
||||
|
||||
#testigo2 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#state-logo {
|
||||
height: 35px;
|
||||
width: 25px;
|
||||
background-size: 20px;
|
||||
}
|
||||
|
||||
#dash-logo {
|
||||
height: 35px;
|
||||
width: 25px;
|
||||
background-size: 20px;
|
||||
}
|
||||
|
||||
#nav-wrap {
|
||||
font: 10px 'opensans-bold', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
|
|
@ -46,17 +62,6 @@ Disroot Media Queries
|
|||
display: none;
|
||||
}
|
||||
|
||||
ul#nav li:first-child {
|
||||
margin-right: 1%;
|
||||
}
|
||||
|
||||
ul#nav li:nth-last-child(2) {
|
||||
margin-left: 1%;
|
||||
}
|
||||
|
||||
ul#nav li a {
|
||||
padding: 8px 4px;
|
||||
}
|
||||
|
||||
/* Contact Section
|
||||
------------------------------------*/
|
||||
|
|
@ -72,7 +77,7 @@ Disroot Media Queries
|
|||
/* mobile wide/smaller tablets
|
||||
------------------------------------*/
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
@media only screen and (max-width: 795px) {
|
||||
|
||||
/* mobile navigation
|
||||
------------------------------------*/
|
||||
|
|
|
|||
147
css/style.css
147
css/style.css
|
|
@ -157,22 +157,81 @@ header .scrolldown a:hover { color: #50162D; }
|
|||
/* primary navigation
|
||||
------------------------------------*/
|
||||
|
||||
#logo-parent {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
#nav-logo {
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
width: 15%;
|
||||
background: url("../images/d-white.png") no-repeat left center;
|
||||
background-size: 40px 40px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* nav-wrap */
|
||||
#nav-wrap {
|
||||
background-color: #50162D;
|
||||
font: calc(8px + 0.2vw) 'opensans-bold', sans-serif;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2vw;
|
||||
margin: 0 auto;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.opaque { background-color: #50162D; }
|
||||
|
||||
/* hide toggle button */
|
||||
#nav-wrap > a.mobile-btn { display: none; }
|
||||
|
||||
.mobile-btn {
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#testigo {
|
||||
text-align: center;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
ul#nav {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
ul#nav li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
height: 48px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
ul#testigo3 {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#testigo2 {
|
||||
text-align: center;
|
||||
width: 15%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#state-logo {
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
|
|
@ -191,73 +250,6 @@ header .scrolldown a:hover { color: #50162D; }
|
|||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#nav-wrap ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#nav-wrap ul, #nav-wrap li, #nav-wrap a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* nav-wrap */
|
||||
#nav-wrap {
|
||||
background-color: #50162D;
|
||||
font: 12px 'opensans-bold', sans-serif;
|
||||
width: 100%;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2.5px;
|
||||
margin: 0 auto;
|
||||
z-index: 100;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.opaque { background-color: #50162D; }
|
||||
|
||||
/* hide toggle button */
|
||||
#nav-wrap > a.mobile-btn { display: none; }
|
||||
|
||||
.mobile-btn {
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
ul#nav {
|
||||
min-height: 48px;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* center align the menu */
|
||||
text-align: right;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
ul#nav li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* separate top right icons from the rest of the menu */
|
||||
|
||||
ul#nav li:first-child {
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
ul#nav li:nth-last-child(2) {
|
||||
margin-left: 4%;
|
||||
}
|
||||
|
||||
|
||||
ul#nav li ul{
|
||||
position: absolute;
|
||||
|
|
@ -293,11 +285,8 @@ ul.dropdown-content a{
|
|||
|
||||
/* Links */
|
||||
ul#nav li a {
|
||||
|
||||
/* 8px padding top + 8px padding bottom + 32px line-height = 48px */
|
||||
|
||||
display: inline-block;
|
||||
padding: 8px 13px;
|
||||
padding: 8px 12%;
|
||||
line-height: 32px;
|
||||
text-decoration: none;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<footer>
|
||||
<div id="footer-logo" ></div>
|
||||
<div id="footer-logo" ><a href="https://disroot.org/contact"></a></div>
|
||||
<div id="footer-links">
|
||||
<ul class="footer-links">
|
||||
<li>Copyleft Disroot.org</li>
|
||||
|
|
|
|||
|
|
@ -52,10 +52,9 @@
|
|||
|
||||
{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
|
||||
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
|
||||
|
||||
<div id="nav-logo" ><a href="{{ base_url == '' ? '/#home' : base_url }}"></a></div>
|
||||
<div id="testigo">
|
||||
<ul id="nav" class="nav">
|
||||
<li><div id="logo-parent"><a id="nav-logo" href="{{ base_url == '' ? '/#home' : base_url }}"></a></div></li>
|
||||
|
||||
{% for page in pages.children %}
|
||||
{% if page.visible %}
|
||||
{% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
|
||||
|
|
@ -75,10 +74,13 @@
|
|||
{% if config.plugins.login.enabled and grav.user.username %}
|
||||
<li><i class="fa fa-lock"></i> {% include 'partials/login-status.html.twig' %}</li>
|
||||
{% endif %}
|
||||
<li><div id="logo-parent">
|
||||
</ul></div>
|
||||
<div id="testigo2">
|
||||
<ul id="testigo3">
|
||||
<li>
|
||||
<a id="dash-logo" href="https://apps.disroot.org" target=_blank></a>
|
||||
<a id="state-logo" href="https://state.disroot.org" target=_blank></a>
|
||||
</div></li>
|
||||
<li><div id="logo-parent">{% include 'partials/language-selector.html.twig' %}</div></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>{% include 'partials/language-selector.html.twig' %}</a></li>
|
||||
</ul></div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in New Issue