Aligning navigation menu.

Support Area Forums Mise En Place Aligning navigation menu.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://
  • Author
    Posts
  • #36214
    Vicky Brown
    Participant

    How do you align a navigation menu to be centered, to the left, or right justified?

    #36223
    Bill Robbins
    Moderator

    Hi Vicky,

    You’ll need to add a bit of CSS to alter the header’s layout. In the Advanced section of the Customizer, there is a field for Custom CSS. Here’s what you can add there:

    Center Logo & Navigation

    
    @media screen and (min-width: 768px) {
    
    	#logo {
    		float: none;
    		text-align: center;
    	}
    	
    	nav#primary-site-navigation {
    		float: none;
    		top: 0;
    		-webkit-transform: translateY(0);
    		-ms-transform: translateY(0);
    		transform: translateY(0);
    	}
    	
    	#header-menu {
    		width: 100%;
    		text-align: center;
    	}
    	
    	#header-menu li {
    		display: inline-block;
    		float: none;
    	}
    	
    }
    

    Left Side Navigation/Right Hand Logo

    
    @media screen and (min-width: 768px) {
    
    	#logo {
    		float: right;
    	}
    	
    	nav#primary-site-navigation {
    		float: left;
    	}
    	
    }
    

    Enjoy your weekend,
    Bill

    #36238
    Vicky Brown
    Participant

    The CSS works! Thanks, Bill.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Aligning navigation menu.’ is closed to new replies.