0
ナビゲーションで応答するヘッダーを作成しようとしていますが、デザインやリンクの配置などに問題があります。本質的に2行あります。CSSと応答可能なヘッダー/ナビゲーションの問題
私の一番上の行は、右端に3つのリンクを配置します。 2番目の行は私の主な会社名で、左側は3つのナビゲーションリンクがあります。また、私は左端に配置したい会社のロゴを持っていて、両方の行に浮かんでいます。
私はCSSのエキスパートではなく、これまで正しい方向に動いているように見えますが、ナビゲーションネストされていないリストの両方が、ネストされているように見えるすべての終わりにある理由については固執しています。
また、2番目の行のナビゲーション項目が「ハンバーガーのアイコン」に崩壊するように、この応答をある時点で行う必要があります。誰かが私が持っているものにいくつかのポインタを貸すことができればそれは高く評価されます。ここで
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
}
.navContainer {
width: 100 %;
height: 105 px;
background-color: red;
margin: 0px;
padding: 0px;
}
.logo {
height: 100px;
max-width: 100%;
float: left;
overflow: hidden;
left: 10px;
margin: 5px;
}
.bottomBar {
width: 100%;
height: 65px;
background-color: blue;
}
.companyName {
color: white;
display: table-cell;
height: 60px;
padding-left: 5px;
}
.topNavigation {
width: 100%;
height: 40px;
background-color: grey;
}
.topNavigation ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
.topNavigation li {
float: right;
}
.topNavigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topNavigation li a:hover {
background-color: #111;
}
.navigation ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
.navigation li {
float: right;
}
.navigation li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navigation li a:hover {
background-color: #111;
}<img class="logo" src="https://upload.wikimedia.org/wikipedia/en/b/be/Google_Chrome_for_Android-_Android_5.0_Logo.png">
<div class="topNavigation">
<ul>
<li><a href="#news">Link 1</a></li>
<li><a href="#contact">Link 2</a></li>
<li><a href="#about">Link 3</a></li>
</ul>
</div>
<div class="bottomBar">
<span class="companyName">
<h3>My Company Name Goes Here </h3>
</span>
<div class="navigation">
<ul>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>jsfiddle https://jsfiddle.net/masAndrew/0apmmfLm/4/
メディアクエリを使用する –