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.
-
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.
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%; }
- The topic ‘Center menu and text in Twenty-Twelve’ is closed to new replies.