Issue 2675 - Implemented responsive header for web.eyeo.com

static/css/styles.css

 /*
  * Fonts
  */
 @font-face {
   font-family: "Lato";
   font-style: normal;
   font-weight: 400;
   src: local("Lato Regular"), local("Lato-Regular"), url(/fonts/Lato-Regular.woff) format('woff');
 }
 @font-face {
@@ skipping 83 matching lines @@
   font-size:14px;
 }
 
 h6
 {
   font-size:12px;
 }
 
 #header
 {
-  display: block;
   position: fixed;
-  background-color: #ffffff;
+  background-color: #fff;
   width: 100%;
-  top: 0;
-  left: 0;
-  box-shadow: 0 0 12px rgba(0,0,0, 0.09);
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 12px rgba(0,0,0, 0.09);
   z-index: 10000;
-}
-
-#header.top 
-{
-  padding: 8px 0;
+  text-align: right;
+}
+
+#header .content-block
+{
+  position: relative;
+  padding: 15px 10px;
+  min-height: 32px;
+}
+
+#header.top .content-block
+{
+  padding: 25px 10px;
 }
 
 #logo
 {
-  float: left;

[saroyanm, 2016/04/08 16:56:09]

Why do we need to use float ?

[juliandoucette, 2016/04/25 19:08:55]

Because I don't want it to overlap.

- absolute/fixed would overlap
- inline block would require a hacky container/separator
- floats stack when they run into each other

[juliandoucette, 2016/04/25 19:13:54]

Clarification: I'm talking about overlapping when the screen gets too small to
contain both elements side by side.

[saroyanm, 2016/05/06 14:49:27]

I think you can alternatively have logo positioned absolutely and have left
margin equal to the size of the logo so you will not have overlap. Ex.:

<logo positioned absolute width=100px></logo>
<nav width=100% text-align=right>
  <inline block margin-left=100px></inline block>
  <inline block></inline block>
  <inline block></inline block>
</nav>

What you think ?

[juliandoucette, 2016/05/11 18:11:06]

It would be better to set a minimum width on the container to prevent
overlapping. 

Absolute positioning is great for positioning blocks in absolute positions.

Floating is great for positioning blocks inline left or right.

I intended to position these blocks inline inside the header left and right.

[saroyanm, 2016/05/19 07:43:39]

You are right setting min-width is looks to be a better solution, currently we
are using bunch of floats and it's bit chaotic now and you are right absolute
positioning is also not a good solution for this case, but I would argue that
Float are not meant for layouting and they only needs to be used when there is
no alternative for layouting IMO if we can avoid floating that would be great.
"The float CSS property specifies that an element should be taken from the
normal flow and placed along the left or right side of its container, where text
and inline elements will wrap around it"
So while it's possible to achieve result without using float that will be great
and if we can use floats only for the reason they are meant for.

-  margin: 5px 0;
+  position: absolute;
+  top: 7px;
+  left: 10px;
+}
+
+#header.top #logo
+{
+  top: 17px;
+}
+
+#header .menu-button
+{
+  margin: 0px 0px 0px 25px;
 }
 
 #menu
 {
-  float: right;
+  display: inline;
   vertical-align: middle;
 }
 
 .assistive-text
 {
-  position: absolute;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
 }
 
 .menu-list
 {
+  display: inline;
+  margin: 0px;
+  font-size: 15px;
   list-style: none;
-  margin: 0;
-  padding: 22px 0;
-  font-size: 14px;
-  float: right;
 }
 
 .menu-list li
 {
-  position: relative;
+  display: inline;
+  font-weight: bold;
   white-space: nowrap;
-  display: block;
-  font-size: 15px;
-  font-weight: bold;
-  outline-width: 0;
-  float: left;
-  margin-right: 1px;
 }
 
 .menu-list li a
 {
   color: #979797;
   padding: 0 10px;
 }
 
 .menu-list li:hover > a,
 .menu-list li.current-menu-item > a
 {
   color: #373737;
 }
 
-.menu-button
-{
-  float: right;
-  margin: 14px 0 14px 25px;
-}
-
-#header-hamberger
+#header-hamburger
 {
   display: none;
 }
 
-#header-hamberger:hover,
-#header-hamberger:active,
-#header-hamberger:focus
-{
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.icon-bar {
-  background-color: #888;
+#header-hamburger:hover .icon-bar,
+#header-hamburger:focus .icon-bar,
+#header-hamburger:active .icon-bar
+{
+  background-color: #000;
+}
+
+
+.icon-bar
+{
   display: block;
   width: 22px;
   height: 2px;
   border-radius: 1px;
-}
-
-.icon-bar+.icon-bar {
+  background-color: #888;
+}
+
+.icon-bar+.icon-bar
+{
   margin-top: 4px;
 }
 
 #content:before,
 #content:after,
-#header:before,
-#header:after,
 .columns-container:before,
 .columns-container:after
 {
   content: " ";
   display: table;
 }
 
 #content:after,
-#header:after,
 .columns-container:after
 {
   clear: both;
 }
 
 #footer
 {
   color: #666;
   background-color: #252525;
   padding-top: 30px;
@@ skipping 564 matching lines @@
 .why-work-here-button:focus
 {
   background-color: #333;
 }
 
 
 @media (max-width: 768px)
 {
   body
   {
-    padding-top: 64px;
-  }
-
-  #logo > img 
-  {
-    height: 34px
+    padding-top: 50px;
+  }
+
+  #header .content-block,
+  #header.top .content-block
+  {
+    padding: 9px 10px;
+  }
+
+  #header.top #logo
+  {
+    top: 7px;
+  }
+
+  #logo > img
+  {
+    height: 34px;
+  }
+
+  #menu
+  {
+    display: none;
+  }
+
+  #menu.open
+  {
+    display: block;
+  }
+
+  #header-hamburger
+  {
+    position: absolute;
+    top: 9px;
+    right: 10px;
+    display: block;
+    padding: 0px;
+    margin: 0px 5px;
+    background: none;
   }
 
   .menu-list
   {
-    padding: 12px 0;
-  }
-
-  .menu-item > a 
-  {
-    font-size: 13px
+    margin-top: 45px;
+    padding: 0px;
+    display: block;
+  }
+
+  .menu-list > li
+  {
+    display: block;
+    border-top: 1px solid #eee;
+  }
+
+  .menu-list > li > a
+  {
+    display: block;
+    margin: 0px;
+    padding: 10px;
+    font-size: 14px
   }
 
   .menu-button
   {
-    margin: 5px 0 5px 10px;
-    font-size: 13px
+    position: absolute;
+    top: 9px;
+    right: 50px;
+    height: 32px;
+    padding: 0 10px;
+    line-height: 32px;
+    font-size: 14px;
   }
 
   .columns-container .column
   {
     width: 100%;
     margin-left: 0;
     clear: both;
   }
 
   #press-info .sidebar-left
   {
     text-align: inherit;
   }
 
   #releases li > *
   {
     display: block;
   }
 
   .no-mobile
   {
     display: none;
-  }
-}
-
-@media(max-width: 660px)

[saroyanm, 2016/04/08 16:56:09]

Why do we need two media queries ? 
I think would be great to have only one, maybe we can use percentages for logo
for smaller screens or just go with small size implementation ? 
Because as much we will introduce media queries as much maintenance  effort we
will introduce for future.

[juliandoucette, 2016/04/25 19:08:55]

This media query does have an admittedly small use case... I will remove it.

-{
-  #menu
-  {
-    display: none;
-    float: none;
-  }
-
-  .menu-list
-  {
-    padding: 0;
-    float: none;
-    clear: both;
-    display: block;
-  }
-
-  #menu.open
-  {
-    display: block;
-  }
-
-  .menu-list > li
-  {
-    float: none;
-    display: block;
-    border-top: 1px solid #eee;
-  }
-
-  .menu-list > li > a
-  {
-    padding: 10px ;
-    display: block;
-    margin: 0;
-  }
-
-  .menu-button
-  {
-    height: 32px;
-    line-height: 32px;
-    padding: 0 10px;
-    margin: 7px 0;
-  }
-
-  #header-hamberger
-  {
-    display: block;
-    float: right;
-    margin: 5px -5px 0 5px;
-    background: none;
-    padding: 0 10px;
   }
 }
 
 @media (min-width: 751px)
 {
   .ui-tabs-nav-vertical
   {
     padding: .2em .1em .2em .2em;
     float: left; width: 100%;
     border-bottom: none;
@@ skipping 12 matching lines @@
     padding-right: .1em;
     border-right-width: 1px;
     border-right-width: 1px;
   }
 
   #panels-openings
   {
     margin-top: -40px;
   }
 }