|
@@ -102,9 +102,16 @@
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
+// Dynamically fit logo image to space available.
|
|
|
+// No need to explicitly set a size for each breakpoint.
|
|
|
+// See https://caniuse.com/#feat=mdn-css_properties_width_stretch .
|
|
|
.navbar-brand img {
|
|
|
- max-height: 60px;
|
|
|
- max-width: fit-content; /* Otherwise logo disappears at some responsive sizes. */
|
|
|
+ width: auto;
|
|
|
+ height: -moz-available;
|
|
|
+ height: -webkit-fill-available;
|
|
|
+ height: -webkit-stretch;
|
|
|
+ height: stretch;
|
|
|
+ max-width: fit-content; // Must override default responsive image style.
|
|
|
}
|
|
|
|
|
|
#navbar-main .main-menu-item ul li .nav-link {
|
|
@@ -112,11 +119,8 @@
|
|
|
}
|
|
|
|
|
|
@include media-breakpoint-down(md) {
|
|
|
- .navbar-brand img {
|
|
|
- max-height: 40px;
|
|
|
- }
|
|
|
.navbar-brand {
|
|
|
- max-width: 100px;
|
|
|
+ max-width: fit-content;
|
|
|
margin: 0 auto;
|
|
|
position: absolute;
|
|
|
left: 0;
|