EC-CUBE4：ヘッダーのカテゴリリストで表示崩れ発生

EC-CUBE4の標準Frameでカテゴリリストの挙動

店舗内カテゴリの登録を終え表示を確認したところ3階層以降のcategoryがプルダウン時に横並びになっていました。

文字数の少ないもの(例えば『鍋』とか)の表記で起こる事を確認。
これはCSSで制御できるだろうと思い場所を探したので備忘録に記します。

管理画面でのカテゴリコントロール箇所

表示されている情報は、管理画面上の『コンテンツ管理＞ブロック管理＞カテゴリナビPC』です。
しかし、ここにはCSSの記載が無いためカテゴリ関連のスタイルを記載したCSSを探します。

CSSの記載箇所

カテゴリナビ(PC)に関するスタイルシートは下記フォルダに存在しました。

EC-CUBE保存フォルダ/html/template/default/assets/css/style.css

この4898行目から5026行目がカテゴリのスタイルシートになっています。

ヘッダー：カテゴリナビ

ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。

Markup:
include /assets/tmpl/elements/11.4.categoryNavi.pug
+ec-itemNav

sg-wrapper:
<div class="ec-categoryNaviRole" style="padding-bottom:150px;">
  <sg-wrapper-content/>
</div>

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1130px;
  display: none; }
  .ec-categoryNaviRole:after {
    content: " ";
    display: table; }
  .ec-categoryNaviRole:after {
    clear: both; }
  .ec-categoryNaviRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
  .ec-categoryNaviRole img {
    max-width: 100%; }
  .ec-categoryNaviRole html {
    box-sizing: border-box; }
  .ec-categoryNaviRole *,
  .ec-categoryNaviRole *:before,
  .ec-categoryNaviRole *:after {
    box-sizing: inherit; }
  .ec-categoryNaviRole img {
    width: 100%; }

.ec-itemNav {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center; }

.ec-itemNav__nav {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  height: auto;
  list-style-type: none;
  text-align: center;
  vertical-align: bottom; }

.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  position: relative; }

.ec-itemNav__nav li a {
  display: block;
  border-bottom: 1px solid #E8E8E8;
  margin: 0;
  padding: 16px;
  height: 55px;
  color: #2e3233;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid #E8E8E8; }

.ec-itemNav__nav li ul {
  display: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  position: static;
  top: 100%;
  left: 0; }

.ec-itemNav__nav li ul li {
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: .3s; }

.ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #E8E8E8;
  padding: 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  background: black; }

.ec-itemNav__nav > li:hover > a {
  background: #fafafa; }

.ec-itemNav__nav > li:hover li:hover > a {
  background: #333; }

.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto; }

.ec-itemNav__nav li ul li ul li a {
  background: #7D7D7D; }

.ec-itemNav__nav li:hover ul li ul li a:hover {
  background: #333; }

Class：ec-itemNav__nav li に追記しコントロールする

場当たり的な処理ですが、以下の変更(追記)で孫カテゴリが横並びする現象が発生しなくなりました。

/* デフォルトでは 4962行目にあります */
.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 110px; /* ココ追加 */
  text-align: center;
  position: relative; }

min-width で設定する値は其々のサイトで異なるかと思います。
また、この処理は一時的な措置であるめ、文字量によって3階層以降の幅が統一されていない状態は解消できていません。そこら辺はまたしっかり作り込むときに探して処理、報告したいと思います。

＼ 最新情報をチェック ／