ヘッダメニューの各メニューの幅を変えたい。スマホ用のハンバーガーが表示する方法

ヘッダーメニューの一部文字が見切れてしまう件でご不便をおかけします。

ブラウザがInternetExplorerの場合に、項目名の一部が見切れてしまう状況を確認できました。
※GoogleChromeやMicrofostEdgeでは同状況の再現は確認できませんでした。

こちらはご利用のブラウザによってCSSやスタイルの読み込み方法や認識が異なるため、
ブラウザによってページの表示が異なることが要因となります。

ブラウザの仕様となりシステム側での対応はできませんため、ヘッダメニューの項目名が長い場合は
2行での表示に切り替えていただくなどのご対応をお願いいたします。
ヘッダーメニュー項目名の開業は、ページレイアウト管理(拡張設定＞デザイン設定）で
ヘッダーメニューパーツの編集(鉛筆ボタン)をクリックします。
項目名を下記のような形式で記載をお願いいたします。

■メニュータイトルを２行で表示する場合の例
<div style="display: inline-block; font-size: 90%; line-height:16px;">１行目文字
２行目文字</div>

もしくは「design.css（デザインテンプレート）」（拡張設定＞デザイン設定のテンプレートタブ内
使用しているテンプレートの[CSS]）内にあるスタイルのうち下記部分を削除してください。
※項目内の幅が詰まった際に改行されるようになります。

.top_menu_pulldown li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-width: 35px;
height: 48px;
text-align: center;
white-space: nowrap; ←こちらを削除
text-decoration: none;
/* -webkit-transition: all 0.25s; */
/* transition: all 0.25s; */
overflow: hidden;
cursor: pointer;
opacity: 1;
}


次にヘッダーメニューのハンバーガーアイコンに関しては、標準で3本線を表示させる形で
ハンバーガーマークを表示させております。
ショップページのCSSを確認したところ、該当箇所が初期値から変更されているように見受けられます。

3本線の表示に関しては拡張設定＞デザイン設定のテンプレートタブに入り、使用しているテンプレートの
[CSS]をクリックし、「design.css（デザインテンプレート）」の編集画面に入ります。

CSSの下記部分でハンバーガーマークを構成する線を表示させておりますので一度ご確認ください。
線を指定するスタイルがない場合は、追加いただければ表示されるかと存じます。

.btn_top_menu:after {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 24px;
height: 0;
border-top: 2px solid;　←3本線2本目
-webkit-transition: all .35s;
transition: all .35s;
}

.btn_top_menu:before {
content: "";
position: absolute;
display: block;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 24px;
height: 18px;
border-top: 2px solid;　←3本線1本目
border-bottom: 2px solid;　←3本線3本目
-webkit-transition: all .35s;
transition: all .35s;
}

また、3本線は黒色となります。
色を変更する場合は次のように色指定の追加をお願いいたします。
※#FFFFFF部分をご希望の色コードに変更してご利用ください。

■線の色を白色にするサンプルコード
border-top: 2px solid #FFFFFF;


最後に「SM用」はスマートフォン用の略称です。
PC版とスマートフォン版でデザインが異なる部分等があり、識別のために記載させていただいております。

回答どうもありがとうございます。

仰る通り改行すれば収まりますね。恐縮ですがCSSを調べていたところヘッダメニューがflexで各項の幅が数値固定されていたので、自動にしたところ見切れもなく無駄な余白もなくうまくいきました。
flex: 0 1 230; 変更前
flex: 0 1 auto; 変更後
念のため改行も書いておきます。

ハンバーガーアイコンは無事に表示できました。どうもありがとうございます。間違えてborderの記述を消してしまったようです。

分かりました。「スマホ」と「SM」という別の単語があったので別々の意味かと思っていました。あとスマートフォンを英略は「SP」だと思います。

いつも的確丁寧な対応をどうもありがとうございます。こちらも大変勉強になります。