FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix language dropdown CSS

Browse source
This commit is contained in:
hossainemruz 2020-08-07 21:23:56 +06:00 • committed by Emruz Hossain
parent 6bfba135e8
commit 5da3cf5ebf
3 changed files with 43 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/config.yaml
View file

@ -43,7 +43,7 @@ params:
description: Portfolio and personal blog of Jane Doe.
# background image of the landing page
background: "/images/background.jpg"
background: "images/background.jpg"
# Provide logos for your site. The inverted logo will be used in the initial
# transparent navbar and the main logo will be used in the non-transparent navbar.
@ -83,4 +83,4 @@ params:
# give your some contact information. they will be used in the footer
contactInfo:
email: "janedoe@example.com"
phone: "+0123456789"
phone: "+0123456789"

31
layouts/partials/navigators/navbar.html
View file

@ -63,25 +63,22 @@
<a class="nav-link" href="{{ .url }}">{{ .name }}</a>
</li>
{{ end }}
<li class="nav-item">
{{ if .IsTranslated }}
<ul>
<div class="dropdown nav-item languages-menu">
<button class="btn-dark dropdown-toggle nav-item" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: rgba(255, 255, 255, 0); color: ;">
{{ .Site.Language.LanguageName }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/32.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</div>
</ul>
{{ if .IsTranslated }}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/16.png">
{{ .Site.Language.LanguageName }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{{ range $.Site.Home.AllTranslations }}
<a class="dropdown-item nav-link languages-item" href="{{ .Permalink }}">
<img class="flag" src="https://www.countryflags.io/{{ cond (eq .Site.Language.Lang "en") "gb" .Language }}/flat/24.png">
{{ .Language.LanguageName }}
</a>
{{ end }}
</div>
</li>
{{ end }}
</ul>
</div>
</div>

38
static/assets/css/navigators/navbar.css
View file

@ -116,6 +116,33 @@
margin-left: -10px;
}
.top-navbar .dropdown-menu {
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
border: 1px solid #fff;
max-height: 100vh;
overflow-y: auto;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.top-navbar .dropdown-menu a {
color: #1c2d41;
border-bottom: none;
}
.top-navbar .dropdown-menu a:hover {
color: #2098d1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
border-bottom: none;
background: rgb(2, 0, 36);
background: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(34, 136, 168, 0.2) 0%
);
}
/* ============= Device specific fixes ======= */
/* Large screens such as TV */
@ -271,14 +298,3 @@
/* iPhone 5 or before */
@media only screen and (max-width: 320px) {
}
.languages-menu {
filter:alpha(opacity=50); /* Internet Explorer 6 */
-moz-opacity:0.5; /* Mozilla 1.6 et infér. */
opacity: 0.5; /* CSS3 et Mozilla récents */
padding-top: 6px;
border: 0;
}
.languages-item {
}