HTMLヘッダーでコンポーネントを結合する方法

Question

私のヘッダーには2つのコンポーネントがあります。メニューボタンとSVGロゴが表示されます。 codepenにはsimulationがあります。

[CSSのサブセットはstackoverflowの質問をシードする]同じ行に、メニューボタン（ハンバーガーメニュー）が左側にあり、というSVGのロゴがオンになっているので、CSSを変更する方法

.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 
} 

権利？

左上のハンバーガーメニューを得るために必要な変更は、それを浮遊し、そのポジショニング/マージン（およびそのドロップダウンのことを）削除している

Answer 1

：

.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 
    } 

、必要右上のロゴを取得します絶対位置と、明示的な寸法設定の添加：それが動作するはず

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

Codepen：https://codepen.io/anon/pen/BKgGme