Q&A
現在レスポンシブデザイン対応のウェブサイトを設計しているのですが、
ナビゲーションバーのハンバーガーメニューが左側に寄ってしまっています。
これを右側に寄せたいのですが方法がわかりません。
左側に寄ってしまっている原因と右側に寄せる方法についてご教授いただけますでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, intial-scale=1, shrink-to-fit=no"> 6 <title>TOP</title> 7 <link rel="stylesheet" href="Hover-master/css/hover.css"> 8 <link rel="stylesheet" href="bootstrap-4.3.1-dist/css/bootstrap.min.css"> 9 <link rel="stylesheet" href="Animate.css"> 10 <link rel="stylesheet" href="RYMF-TOP.css"> 11 <script src="bootstrap-4.3.1-dist/js/jquery.min.js"></script> 12 <script src="bootstrap-4.3.1-dist/js/popper.min.js"></script> 13 <script src="bootstrap-4.3.1-dist/js/bootstrap.min.js"></script> 14</head> 15<body> 16 <div class="container-fruid"> 17 18 <div class="row mb-navbar"> 19 <button class="menu-btn" id="mobile-menu"></button> 20 </div> 21 22 <div class="row navbar"> 23 24 <div class="col-lg-4 col-md-4 col-sm-4"></div> 25 26 <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">HOME</a> 27 28 <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">WORK</a> 29 30 <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">ABOUT</a> 31 32 <a href="#" class="col-lg-1 col-md-1 col-sm-1 hvr-underline-from-left">CONTACT</a> 33 34 <div class="col-lg-4 col-md-4 col-sm-4"></div> 35 36 </div> 37 38 </div> 39 40 41 42</body> 43</html>
CSS
1@charset="utf-8"; 2 3.mb-navbar{ 4 background-color: black; 5 height: 55px; 6 padding: 0; 7} 8 9.menu-btn { 10 margin: 0 10px 0 0; 11 padding: 10px 0; 12 border: 1px solid #fff; 13 border-radius: 4px; 14 width: 40px; 15 height: 40px; 16 background: url(hamburger.png) no-repeat center center; 17 background-size: contain; 18} 19 20.navbar{ 21 text-align: center; 22 background-color: black; 23 line-height: 55px; 24 padding: 0; 25} 26 27.navbar a{ 28 color: white; 29 font-size: 12px; 30 margin: 0; 31 padding:0; 32} 33 34.navbar a:hover{ 35 color: white; 36 text-decoration: none; 37 font-size: 13px; 38} 39 40@media screen and (min-width:576px){ 41 .mb-navbar{ 42 display: none; 43 } 44}
回答1件
0
ベストアンサー
ハンバーガーメニューのボタンが左に寄ってるのは、
ボタンを内包している.mb-navbarの幅が、指定されていない（つまり、子要素の幅にフィットするようになっている）からです。
右によせる方法はいくつかあり、それぞれに特徴があるので、自分で調べてどの方法がよいか選んでください。
とりあえず右に表示されれば何でも良いというのであれば、
.mb-navbar{ width:100vw; position:relative; } .menu-btn { position:absolute; right:0;
と書いておけば右に行きます。
投稿2019/09/10 13:17
総合スコア975
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/11 07:18