Aligning navigation menu.

Support Area Forums Mise En Place Aligning navigation menu.

This topic contains 2 replies, has 2 voices, and was last updated by  Vicky Brown 1 year, 7 months ago.

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.