デスクトップのウェブサイトのヘッダーウィジェットがモバイルヘッダーを乱してしまった

Question

最近デスクトップモードのために私のウェブサイトのヘッダーにウィジェットを追加しました。私はこのウィジェットをロゴの右側と同じライン上に置くことに苦労しましたが、結局それを得ました。このプロセスでは、私はヘッダーがモバイルデバイス上でどのように見えるかを乱しているようです（例についてはtwoguysplayingzelda.comを参照してください）。視聴率の65％がモバイル経由であるため、これを修正したいと思いますが、どのように考えていないのですか。私はロゴを中央に表示し、完全に表示可能にし、左側にメニューアイコンを表示します（変更する前に使用しています）。私は自分のstyle.cssの応答セクションにコーディングを追加する必要があることを認識しています。以下は、私が現在CSS（デスクトップセクション）で私のヘッダーのために持っているものです。私はウェブサイトを始める前にCSSとHTMLについては何も知りませんでした。彼らは両方のfloat: leftを持っているので、あなたの助け

div#header-widget-area { 
    float: right; 
} 

.header { 
    padding-top: 10px; 
    padding-bottom: 60px; 
    color: #01B3D9; 
} 

.header .cover { 
    background: rgba(29,29,29,0.0); 
} 

.header-inner { 
    position: relative; 
} 

.header .blog-logo { 
    text-align: left; 
} 

.header .logo { 
    display: inline; 
    float: left; 
} 

.header .logo img { 
    max-height: 50px; 
    width:auto; 
} 

Answer 1

のおかげでは、メニューアイコンは、ロゴの右にプッシュされます。

.logoからfloat: leftを削除し、display: inline-blockから.blog-logoを追加してください。両方の問題を修正する必要があります。