VWSとは フォーラム Lightning [ 解決済 ] グローバルメニューのボタンデザインについて

[ 解決済 ] グローバルメニューのボタンデザインについて

  • このトピックには2件の返信、2人の参加者があり、最後にyoko8525により1ヶ月、 1週前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #45854

    yoko8525
    参加者

    ■ 利用テーマとバージョン :Lightning pro バージョン: 8.3.1

    ■ 質問内容:
    ヘッダーのロゴとグローバルメニューをそれぞれCSSをいじって中央寄せにしています。
    グローバルメニューは画面をスクロールさせると最上部にボタンが固定表示されますが、非スクロール時も同じようなデザインでメニューボタンを設置したいのですが、可能でしょうか。

    #45892

    DRILL LANCER
    モデレーター

    ヘッダーのロゴとグローバルメニューをそれぞれCSSをいじって中央寄せにしています。

    どのように実現しているのかわかりませんので上記も含めたコードを書きます。

    @media (min-width: 992px) {
    
    	.container.siteHeadContainer {
    		display: flex;
    		justify-content: space-between;
    		flex-wrap: wrap;
    		padding-bottom: 0px;
    	}
    
    	.navbar-header {
    		width: 100%;
    		order: 0;
    		float: none;
    	}
    
    	.siteHeader_logo {
    		float: none;
    		width: 100%;
    		text-align: center;
    	}
    
    	.siteHeader_logo img {
    		margin: 0 auto;
    	}
    
    	.gMenu_outer {
    		width: 100%;
    		order: 1;
    		float: none;
    		min-height: unset;
    		clear: both;
    	}
    
    	ul.gMenu {
    		float: none;
    		display: flex;
    		justify-content: center;
    		float: none;
    		display: flex;
    	}
    		
    	.gMenu_outer nav {
    		width: 960px;
    		max-width: 960px;
    		margin-left: auto;
    		margin-right: auto;
    		display: block;
    	}
    	.gMenu>li {
    		width: 50%;
    		border-left: 1px solid #f5f5f5;
    	}
    	.gMenu>li:last-child {
    		border-right: 1px solid #f5f5f5;
    	}
    }
    
    @media (min-width: 1200px) {
    	.gMenu_outer nav {
    		width: 1140px;
    		max-width: 1140px;
    	}
    }
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    • この返信は1ヶ月、 1週前にDRILL LANCERが編集しました。
    #45921

    yoko8525
    参加者

    DRILL LANCER様、ありがとうございます。

    中央寄せについてはご教示いただいたコードと同じ内容でした。
    教えていただいたコードを試しましたところ、希望とおりのボタンデザインになりました!

    ありがとうございました。

3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • このトピックに返信するにはログインが必要です。