WordPress.org

Ready to get started?Download WordPress

Forums

Center menu and text in Twenty-Twelve (3 posts)

  1. learningwordpress120
    Member
    Posted 1 year ago #

    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.

  2. leejosepho
    Member
    Posted 1 year ago #

    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.

  3. learningwordpress120
    Member
    Posted 1 year ago #

    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:      http://fiverr.com/kevinm97
     Description:    Twenty Twelve Child Theme
     Author:         Kevin McClellan
     Author URI:     http://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%; }

Topic Closed

This topic has been closed to new replies.

About this Topic