Center menu and text in Twenty-Twelve

  • I am working with a child theme for Twenty-Twelve, trying to center the menu and the text. I have searched the forums for solutions, but those that have been offered don’t work for me.

    Per one of the discussions, I added

    ‘.main-navigation ul.nav-menu {
    text-align: center;’
    }’

    to the .css file and nothing changed.

    My site is at marycwaters.com. I am working on a MacBook, 10.6

    Thank you very much.

Viewing 2 replies - 1 through 2 (of 2 total)

  • I do not understand all the details about how Twenty Twelve works, but here is what I have to center my own nav menu:

    /* Navigation Menu */
.main-navigation { margin-top: 12px; margin-top: 0.857142857rem; text-align: center; } /* margin-top is different in media queries */

/* Media Queries Navigation Menu */
	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 0; border-top: 0;
		display: inline-block!important; text-align: center; width: 100%; }

    That first line is above the media queries in my Child Theme’s style.css, and the second is inside my media queries farther down on the page.

    Thread Starter learningwordpress120

    (@learningwordpress120)

    Thank you very much. Your suggestion worked beautifully to center the menu. I realize I wasn’t clear about what I wanted for the text. I want it centered, but with white space on the left and right margins. I tried adjusting the width (width: 80%) and (width: 60%) but it didn’t affect the margins. This is what the entire .css file looks like now with the width set at 80%

    /*
 Theme Name:     Twenty Twelve Child Theme
 Theme URI:      https://fiverr.com/kevinm97
 Description:    Twenty Twelve Child Theme
 Author:         Kevin McClellan
 Author URI:     https://fiverr.com/kevinm97
 Template:       twentytwelve
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here

-------------------------------------------------------------- */
    /* Navigation Menu */
    .main-navigation { margin-top: 12px; margin-top: 0.857142857rem; text-align: center; } /* margin-top is different in media queries */

    /* Media Queries Navigation Menu */
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 0; border-top: 0;
    		display: inline-block!important; text-align: center; width: 80%; }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Center menu and text in Twenty-Twelve’ is closed to new replies.