ロゴの位置が変わらないようにしたい

Bootstrapで手に入れたHTML・CSSを使ってコーディングしています。

ロゴの位置を変えたく、ディズプレイの大きさによってロゴの位置がずれないよう固定したいです。



<head>
  <meta charset="utf-8">
  <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no”>

  
  <title>OnePage Bootstrap Template - Index</title>
  <meta content="" name="description">
  <meta content="" name="keywords">


 
  <link href="assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: OnePage - v4.1.0
  * Template URL: https://bootstrapmade.com/onepage-multipurpose-bootstrap-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">

      <h1 class="logo"><a href="index.html"><img src="./assets/img/bodyplus_yk_A1.png" alt="ロゴマーク"></a></h1>
      <!-- Uncomment below if you prefer to use an image logo -->
      <!-- <a href="index.html" class="logo"><img src="assets/img/logo.png" alt="" class="img-fluid"></a>-->

  

    </div>
  </header><!-- End Header -->




body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
  -webkit-text-size-adjust: -100%;
}

a {
  color: #f09444;
  text-decoration: none;
}

a:hover {
  color: #469fdf;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", sans-serif;
}


#header {
  transition: all 0.5s;
  /* 変更　ヘッダーの色を変えた 元fff 現E7E1D7*/
  background: #E7E1D7;
  z-index: 997;
  padding: 15px 0;
  border-bottom: 1px solid #e6f2fb;
}

#header.header-scrolled {
  border-color: #fff;
  box-shadow: 0px 2px 15px rgba(18, 66, 101, 0.08);
}

#header .logo {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.5px;
  font-family: "Poppins", sans-serif;
}

#header .logo a {
  color: #16507b;
}

#header .logo img {
  max-height: 40px;
}
コード

一部抜粋です。他必要な情報があれば追記します。

Lhankor_Mhy

2021/06/23 01:18

3-7. markdownを利用しましょう https://teratail.com/help/question-tips#questionTips3-7 https://teratail.com/help/question-tips#questionTips3-5-1

Rchan

2021/06/23 02:09

ありがとうございます。

Lhankor_Mhy

2021/06/23 02:12

Bootstrap を読んでいなさそうですが、それは気にしなくていいですか？

Rchan

2021/06/23 02:16

念の為 <title>OnePage Bootstrap Template - Index</title> を記載しました。でも基本気にしなくて大丈夫です。不具合がありそうでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

たとえば、以下のようにすると位置が固定されるのではないかと思います。

css
1#header .logo {
2  position: absolute;
3  top: 0px;
4  left: 0px;
5}

投稿2021/06/23 02:17

Lhankor_Mhy

総合スコア36981

Rchan

2021/06/23 02:26

おー！なりました！しかし、 #header .logo だとメニューも移動してしまったので #header .logo a { color: #16507b; position: absolute; top: 10px; left: 50px; } に入れました。ちなみに top: 10px; left: 50px; は位置調整です。助かりました。ありがとうございます。