[ECサイト開発]ヘッダーがおかしいぞ(´；ω；`)ｳｩｩ

Bootstrapを使用してヘッダーを編集したところ、おかしなところが出てきたのでまとめてみました。

①画像が大きすぎる

こちらはコードの記載が誤っていたようです＞＜

・Before

_header_logout.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
      <a class="navbar-brand" href="/"><%= image_tag('cake.png', size: '20×20') %></a>
..省略..

・After

_header_logout.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
      <a class="navbar-brand" href="/"><%= image_tag 'cake.png', :size =>'20x20' %></a>
..省略..

はぁ～直ったー！と思ったら、んん！？！？
今度はナビゲーションバーの背景色がおかしいぞ(´；ω；`)ｳｩｩ

②ナビゲーションバーの背景色が途切れる
こちらはapplication.htmlと_header.htmlの2つのファイルで、containerとナビゲーションバーを定義していたため、ナビゲーションバーの背景色及び範囲が縮こまっておりました(;^ω^)

今回はapplication.htmlを修正しました。

・Before

application.html

..省略..
<header class="navbar navbar-fixed-top">
      <div class="container">
        <% if customer_signed_in? %>
          <%= render 'layouts/header_customer' %>
        <% elsif admin_signed_in? %>
          <%= render 'layouts/header_admin' %>
        <% else %>
          <%= render 'layouts/header_logout' %>
        <% end %>
      </div>
    </header>
 ..省略..

・After

application.html

..省略..
<header>
        <% if customer_signed_in? %>
          <%= render 'layouts/header_customer' %>
        <% elsif admin_signed_in? %>
          <%= render 'layouts/header_admin' %>
        <% else %>
          <%= render 'layouts/header_logout' %>
        <% end %>
    </header>
..省略..

これで修正完了！
再度確認したところ、、

問題点が直ってました！

頻発するミスではないと思われますが(;^ω^)、
application.htmlファイルでヘッダー作ろとして、途中で部分テンプレート作成して、最初のapplication.htmlファイルの記載消し忘れてしまった時とかに今回のミスを思い出して対処していきたいですね(^▽^)/

なお、今回は、お恥ずかしい話、一人で解決できなかったのでスクールのメンターさんに質問して対処してました(;^ω^)
メンターさんからは下記の参考資料をいただいたので、今後のヘッダーとナビゲーションバーの実装に活かしたいと思いました！
https://qiita.com/Yuya43492396/items/02af881d98cb7909714e
https://getbootstrap.jp/docs/5.3/components/navbar/