Jay Gray Jay Gray - 6 months ago 20
CSS Question

How to combine components in HTML header

My header has two components; menu button and SVG logo. Here is the simulation on codepen.

[CSS subset to seed the stackoverflow question]

.header-T-1 .header__burger span,
.header-T-1 .header__burger:after,
.header-T-1 .header__burger:before {
display: block;
width: 100%;
height: 4px;
background: #fff;
border-radius: 2px;
margin-top: 10px
}


How to change the CSS so that, on the same line, the menu button (hamburger menu) is on the left and the SVG logo is on the right?

Answer

The required changes to get the hamburger menu at top left are to float it and remove its positioning/margin (and that of its dropdown):

  .header-T-1 .header__burger {
-     left: 50%;
-     margin-left: -38px
+     float: left;
  }

  .header-T-1 .header-drop {
      width: 409px;
-     left: 50%;
-     margin-left: -204.5px;
      padding-top: 109px
  }

And to get the logo at the upper right required the addition of absolute positioning and explicit dimension setting:

  .main-header {
    margin-bottom: 1em;
    background: #333;
    padding: .5em;
+   position: absolute;
+   right: 0px;
+   height: 25px; /* assuming these are the desired dimensions */
+   width: 250px;
  }

Codepen where it should work: https://codepen.io/anon/pen/BKgGme