app/template/default/Block/CustomHeaderSP.twig line 1

Open in your IDE?
  1. {#
  2. /**
  3.  * SP専用ヘッダーブロック
  4.  * 768px以下で表示されるモバイル専用ヘッダー
  5.  */
  6. #}
  8. <style>
  9. /* SP専用ヘッダー（768px以下でのみ表示） */
  10. @media (max-width: 768px) {
  11.     .Logo-img{
  12.         width: 84px;
  13.     }
  14.     .sp-header {
  15.         display: flex;
  16.         align-items: center;
  17.         justify-content: space-between;
  18.         padding: 12px 16px;
  19.         background-color: #ffffff;
  20.         border-bottom: 1px solid #f0f0f0;
  21.         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  22.         top: 0;
  23.         height: 64px;
  24.     }
  25.     
  26.     .sp-header__menu-wrapper {
  27.         display: flex;
  28.         flex-direction: column;
  29.         align-items: center;
  30.         text-decoration: none;
  31.         color: black;
  32.         transition: color 0.3s ease;
  33.         gap: 2px;
  34.     }
  36.     
  37.     .sp-header__menu-btn {
  38.         display: flex;
  39.         flex-direction: column;
  40.         justify-content: space-between;
  41.         width: 24px;
  42.         height: 18px;
  43.         background: none;
  44.         border: none;
  45.         cursor: pointer;
  46.         padding: 0;
  47.         margin-bottom: 2px;
  48.     }
  49.     
  50.     .sp-header__menu-btn span {
  51.         display: block;
  52.         width: 100%;
  53.         height: 2px;
  54.         background-color: currentColor;
  55.         border-radius: 1px;
  56.         transition: all 0.3s ease;
  57.     }
  58.     
  59.     .sp-header__menu-text {
  60.         font-size: 12px;
  61.         font-weight: 500;
  62.         line-height: 1;
  63.     }
  64.     
  65.     .sp-header__logo {
  66.         flex: 1;
  67.         display: flex;
  68.         justify-content: center;
  69.         align-items: center;
  70.     }
  71.     
  72.     .sp-header__logo a {
  73.         text-decoration: none;
  74.         color: #8B4513;
  75.         font-size: 20px;
  76.         font-weight: bold;
  77.         font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  78.         letter-spacing: 0.5px;
  79.     }
  80.     
  82.     
  83.     .sp-header__cart {
  84.         display: flex;
  85.         flex-direction: column;
  86.         align-items: center;
  87.         text-decoration: none;
  88.         color: black;
  89.         font-size: 12px;
  90.         font-weight: 500;
  91.         transition: color 0.3s ease;
  92.     }
  93.     
  94.     .sp-header__cart-icon {
  95.         width: 24px;
  96.         height: 24px;
  97.         margin-bottom: 2px;
  98.         fill: currentColor;
  99.     }
  100.     
  101.     .sp-header__cart-text {
  102.         line-height: 1;
  103.     }
  104.     
  105.     .sp-header__cart-count {
  106.         background-color: #D2691E;
  107.         color: white;
  108.         font-size: 12px;
  109.         font-weight: bold;
  110.         border-radius: 50%;
  111.         width: 18px;
  112.         height: 18px;
  113.         display: flex;
  114.         align-items: center;
  115.         justify-content: center;
  116.         position: absolute;
  117.         top: -8px;
  118.         right: -8px;
  119.         min-width: 18px;
  120.     }
  121.     
  122.     .sp-header__cart-wrapper {
  123.         position: relative;
  124.         display: flex;
  125.         align-items: center;
  126.     }
  127. }
  129. /* PC表示時は非表示 */
  130. @media (min-width: 769px) {
  131.     .sp-header {
  132.         display: none;
  133.     }
  134. }
  135. </style>
  137. <header class="sp-header">
  138.     <!-- ハンバーガーメニュー -->
  139.     <div class="sp-header__menu-wrapper">
  140.         <button class="sp-header__menu-btn" type="button">
  141.             <span></span>
  142.             <span></span>
  143.             <span></span>
  144.         </button>
  145.         <span class="sp-header__menu-text">メニュー</span>
  146.     </div>
  147.     
  148.     <!-- ロゴ -->
  149.     <div class="sp-header__logo">
  150.         <a href="{{ url('homepage') }}">
  151.             <img src="{{ asset('/html/user_data/ContentImg/iseya_logo.png') }}" alt="ショップロゴ" class="Logo-img">
  152.         </a>
  153.     </div>
  154.     
  155. <!-- カート -->
  156. <div class="sp-header__cart-wrapper">
  157.             {{ include('Block/cart.twig') }}
  158. </div>
  159. </header>