0
ナビゲーションバーを反応させるのに問題があります。所望のデザインのために、私はその間に画像を有する2つのulを使用した。これにより、li埋め込みのためにブレークポイントが大きなサイズで発生します。ロゴを左に移動し、ドロップダウンボタンを追加して、ナビゲーションバーのオプションを表示し、モバイルディスプレイの幅でトップバーを削除します。どんな助けでも大歓迎です、ありがとう。応答性の高いナビゲーションバーの作成に問題がある
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scalisi Skincare</title>
<link rel="stylesheet" type="text/css" href="build/css/styles.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<header>
<div class="topbar">
<a href="#">GIVE $10, GET $10</a>
<a href="#">FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+</a>
<a class="right" href="#">MY ACCOUNT</a>
</div>
<nav>
<ul class="firstNavSection">
<li><a href="#">BOB'S CREAM</a></li>
<li><a href="#">SCALISI SKINCARE</a></li>
<li><a href="#">TINTED</a></li>
</ul>
<a href="#"><img src="assets/logo.PNG" alt="SCALISI"></a>
<ul class="secondNavSection">
<li><a href="#">REVIEW</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></a></li>
</ul>
</nav>
</header>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
.topbar {
display: flex;
justify-content: space-between;
background: #7C8DC0;
padding: 8px 100px;
a {
text-decoration: none;
color: white;
flex: 1;
font-family: calibri;
font-size: 1em;
}
.right {
text-align: right;
}
}
nav {
border: 1px solid #dae3e5;
.firstNavSection {
display: inline-block;
position: relative;
top: -10px;
li {
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
}
}
}
a {
img {
display: inline-block;
position: relative;
top: 10px;
}
}
.secondNavSection {
display: inline-block;
position: relative;
top: -10px;
li{
display: inline-block;
list-style: none;
padding: 0 60px;
a {
font-family: calibri;
font-size: 1.5em;
text-decoration: none;
color: black;
i {
color: #7C8DC0;
}
}
}
}
}
}
@ anthrax-xarhtnaこれは答えではなく、 – KiwiPiet
のコメントセクションに適していますが、私の現在の担当者のためにコメントセクションに書き込むことはできません。良い一日を！ – aanthraxx