static/css/header.css

   1 /* luflow.net web site */
   2 /* Public domain 2025. All rights waived */
   3
   4 header {
   5     position: sticky;
   6     transition: transform 0.25s ease-in-out;
   7     top: 0;
   8     width: 100%;
   9     min-height: 66px;
  10     background: #333;
  11     border-color: #1a1a1a;
  12     border-style: none none solid none;
  13     border-width: thin;
  14     padding: 0 32px;
  15     display: flex;
  16     justify-content: space-between;
  17     align-items: center;
  18     font-size: 0.9em;
  19     z-index: 1000;
  20 }
  21
  22 .nav-up {
  23     transform: translateY(-100px);
  24 }
  25
  26 .nav-down {
  27     transform: translateY(0px);
  28 }
  29
  30 .branding:link,
  31 .branding:active,
  32 .branding:focus,
  33 .branding:hover,
  34 .branding:visited {
  35     background-image: url('../img/branding.png');
  36     background-repeat: no-repeat;
  37     border-style: none;
  38     display: inline-block;
  39     height: 55px;
  40     width: 54px;
  41 }
  42
  43 header ul {
  44     position: relative;
  45 }
  46
  47 header ul li {
  48     position: relative;
  49     list-style: none;
  50     float: left;
  51 }
  52
  53 header ul li a {
  54     color: #fff;
  55     font-size: 1.1em;
  56     padding: 28px 25px;
  57     text-decoration: none;
  58     display: flex;
  59     justify-content: space-between;
  60 }
  61
  62 header ul li a:link {
  63     color: #e6e6e6;
  64 }
  65
  66 header ul li a:hover,
  67 .menu-item-active:link,
  68 .menu-item-active:visited {
  69     color: #f4bb15;
  70 }
  71
  72 a.menu-item-active:link,
  73 a.menu-item-active:visited {
  74     background-image: url('../img/menu-item-active-bg.png');
  75     background-position: bottom center;
  76     background-repeat: no-repeat;
  77 }
  78
  79 header ul li a:hover {
  80     background: #434343;
  81 }
  82
  83 header ul li b {
  84     padding-left: 4px;
  85 }
  86
  87 header ul li ul {
  88     position: absolute;
  89     left: 0;
  90     width: 200px;
  91     background: #333;
  92     display: none;
  93 }
  94
  95 header ul li:hover > ul {
  96     display: block;
  97 }
  98
  99 header ul li ul li {
 100     position: relative;
 101     width: 100%;
 102     border: 1px solid rgba(0, 0, 0, 0.2);
 103 }
 104
 105 header ul li ul li ul {
 106     top: 0;
 107     left: 200px;
 108 }
 109
 110 /* make it responsive */
 111 @media (max-width: 900px) {
 112     header {
 113         padding: 10px 32px;
 114     }
 115
 116     header nav {
 117         position: absolute;
 118         width: 100%;
 119         top: 66px;
 120         left: 0;
 121         background: #333;
 122         display: none;
 123     }
 124
 125     header.active nav {
 126         display: initial;
 127     }
 128
 129     header nav ul li {
 130         width: 100%;
 131     }
 132
 133     a.menu-item-active:link,
 134     a.menu-item-active:visited {
 135         background-image: none;
 136     }
 137
 138     header nav ul li ul {
 139         position: relative;
 140         width: 100%;
 141         left: 0;
 142     }
 143
 144     header ul li ul li ul {
 145         top: 0;
 146         left: 0;
 147     }
 148
 149     header nav ul li:hover ul li {
 150         background: #333;
 151     }
 152
 153     .menuToggle {
 154         position: relative;
 155         width: 40px;
 156         height: 50px;
 157         cursor: pointer;
 158         display: flex;
 159         justify-content: center;
 160         align-items: center;
 161     }
 162
 163     .menuToggle::before {
 164         content: '';
 165         position: absolute;
 166         width: 100%;
 167         height: 3px;
 168         background: #fff;
 169         transform: translateY(-12px);
 170         box-shadow: 0 12px #fff;
 171     }
 172
 173     .menuToggle::after {
 174         content: '';
 175         position: absolute;
 176         width: 100%;
 177         height: 3px;
 178         background: #fff;
 179         transform: translateY(12px);
 180     }
 181
 182     header.active .menuToggle::before {
 183         transform: rotate(45deg);
 184         box-shadow: 0 0 #fff;
 185     }
 186
 187     header.active .menuToggle::after {
 188         transform: rotate(315deg);
 189     }
 190 }