Jay Gray Jay Gray - 2 years ago 92
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download