メニューをカスタマイズその２

Tweet

{“main-title”:{“component”:”hc_title”,”id”:”main-title”,”title”:””,”subtitle”:””,”title_content”:{“component”:”hc_title_image”,”id”:”title-image”,”image”:””,”full_screen”:false,”full_screen_height”:””,”parallax”:false,”bleed”:””,”ken_burn”:””,”overlay”:””,”breadcrumbs”:false,”white”:true}},”section_5ZtkF”:{“component”:”hc_section”,”id”:”section_5ZtkF”,”section_width”:””,”animation”:””,”animation_time”:””,”timeline_animation”:””,”timeline_delay”:””,”timeline_order”:””,”vertical_row”:””,”box_middle”:””,”css_classes”:””,”custom_css_classes”:””,”custom_css_styles”:””,”section_content”:[{“component”:”hc_column”,”id”:”column_vtfQF”,”column_width”:”col-md-12″,”animation”:””,”animation_time”:””,”timeline_animation”:””,”timeline_delay”:””,”timeline_order”:””,”css_classes”:””,”custom_css_classes”:””,”custom_css_styles”:””,”main_content”:[{“component”:”hc_wp_editor”,”id”:”Xhugf”,”css_classes”:””,”custom_css_classes”:””,”custom_css_styles”:””,”editor_content”:”今回はメニューのカスタマイズその２として、前回の方法でメニューを追加しすぎた場合、レイアウトが崩れてしまいます。\n\n\n\n今回はcssを調整することで解決してみようと思います！\n\n変更するファイルは、\n/resources/styles.css\nです。共通で使われるので、全般に渡るスタイル変更はこちらで大丈夫です。\n\n \n\n/resources/styles.cssの最後の行に下記を追加します。\n

\n.navbar .nav > li > a {\n  padding: 10px 5px 11px;\n}\n

\nメニューの左右余白を「10px」から半分の「5px」へ変更しています。\n崩れ幅によって変更して下さい。\n\nこれでキレイに収まりました。\n\n“}]}],”section_settings”:””},”scripts”:{},”css”:{},”css_page”:””,”template_setting”:{“settings”:{“id”:”settings”}},”template_setting_top”:{},”page_setting”:{“settings”:[“lock-mode-off”]},”post_type_setting”:{“settings”:{“image”:””,”excerpt”:””,”extra_1″:””,”extra_2″:””,”icon”:{“icon”:””,”icon_style”:””,”icon_image”:””}}}}