Title: centering header Last modified: April 23, 2017 --- # centering header * Resolved [javiskan](https://wordpress.org/support/users/javiskan/) * (@javiskan) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/) * Hi! * How can I center the header? * Thanks Viewing 12 replies - 1 through 12 (of 12 total) * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9059275) * Thanks for using Tracks! * Would you want to center the logo, menu items, or both? * Thread Starter [javiskan](https://wordpress.org/support/users/javiskan/) * (@javiskan) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9060397) * I found in this forum the code to center the logo, so that’s solved 🙂 Now I want to center menu items and the short description (below the logo) * Thanks!!! * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9061275) * Okay cool, you can use this CSS to center everything like that: * ``` @media all and (min-width: 50em) { .site-header { text-align: center; } .site-description { position: static !important; margin: 0 auto 1.5em; text-align: center; } .title-info { float: none; } .menu-primary-items { margin: 0; text-align: center; } } ``` * I’ve included a bit in there to center the logo as well, so you can replace the existing CSS with this snippet. * [btaguiar](https://wordpress.org/support/users/btaguiar/) * (@btaguiar) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9069281) * Does it work in the website if it’s visited with a smartphone? I’m having troubles with that! (logo is centered in the site when I visit the homepage with my browser and Windows, but if I check out the page from my phone, I just see the logo just in the left! * I know it is a responsive theme but I realized too that the centered elements don’t always match in the ‘symmetrical axis’ of the page, depending on the screen resolution of the PC, I think. Could be? (I hope I’m expressing myself well, not native English, sorry) * Thank you for your help! - This reply was modified 9 years, 3 months ago by [btaguiar](https://wordpress.org/support/users/btaguiar/). - This reply was modified 9 years, 3 months ago by [btaguiar](https://wordpress.org/support/users/btaguiar/). * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9069836) * You know what, I wrote the code to only affect the desktop screen widths, but it can work for mobile too. * Please switch to the following CSS instead: * ``` .site-header { text-align: center; } .site-description { position: static !important; margin: 0 auto 1.5em; text-align: center; } .title-info { float: none; } .menu-primary-items { margin: 0; text-align: center; } .toggle-navigation { float: none; } ``` * If everything isn’t exactly centered, could you share a link to your site? * Thread Starter [javiskan](https://wordpress.org/support/users/javiskan/) * (@javiskan) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9072063) * Just a last issue: * With my resolution (1600 x 900), in a page, the elements (logo, menu, title of the page) are not aligned. With the rest of resolutions it works properly. * That’s the last question we think hahahaha Thank you so much for your support 🙂 * > [View post on imgur.com](https://imgur.com/a/mtbSQ) * [http://remontando.es/quienes-somos/](http://remontando.es/quienes-somos/) * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 3 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9072432) * Ah I see. Thanks for the link. Please update to this CSS and it should fix the alignment for wide screen displays: * ``` .site-header { text-align: center; margin: 0 auto; max-width: 1280px; } .site-description { position: static !important; margin: 0 auto 1.5em; text-align: center; } .title-info { float: none; } .menu-primary-items { margin: 0; text-align: center; } .toggle-navigation { float: none; } ``` * [btaguiar](https://wordpress.org/support/users/btaguiar/) * (@btaguiar) * [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9081843) * It worked fine! Thank you so much! * We’re already done with our web design. Just trying to change the search buttom colour (I’m trying texting some CSS in the editor but I can’t find what I can replace, furthermore I just saw you used Font Awesome and it doesn’t appear the symbol, I think). Now, I don’t know why, we get a white box. * ![Search bar issue (if you place the mouse over the buttom, it gets its blackground coloured in black with the text in white)](https://i0.wp.com/i.imgur.com/g8C6ma8. jpg) * And we just visited the page from a mobile phone and we realized the main menu isn’t showed in the web, just only the secondary menu or the footer menu, I’m not sure if it’s because of your desing. * [btaguiar](https://wordpress.org/support/users/btaguiar/) * (@btaguiar) * [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9081931) * Another little problem I just realized, * At meta-author, can’t find how to solve this: * ![](//i.imgur.com/xHAQmCo.png[/img]) * And the search bar issue I said before. * I’m so happy with the Tracks theme. I’ll use in other webpages too. - This reply was modified 9 years, 2 months ago by [btaguiar](https://wordpress.org/support/users/btaguiar/). - This reply was modified 9 years, 2 months ago by [btaguiar](https://wordpress.org/support/users/btaguiar/). * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9082245) * Great, glad to hear that! * This CSS will give fix the author name display and make some updates to the search form. I grabbed an orange shade from one of the images as an example, but the color can be switched to anything. The button text itself is white which is why it can’t be seen right now. * ``` .author-meta a { white-space: nowrap; } .site-footer .search-form-container .search-submit { background: #EAAE5E !important; } .site-footer .search-form-container .search-field { margin-right: 0 !important; } ``` * As for the primary menu, it should be visible after clicking the menu toggle button to display it: [http://pics.competethemes.com/kDuV](http://pics.competethemes.com/kDuV) * [btaguiar](https://wordpress.org/support/users/btaguiar/) * (@btaguiar) * [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9082255) * Yes! The menu toggle button was white before, so I couldn’t figure that it was there hahaha. Thank you! Your support is amazing, better than some expensives templates made by huge companys. * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9083271) * Thanks for the kind words! I’m happy to help. Viewing 12 replies - 1 through 12 (of 12 total) The topic ‘centering header’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png) * Tracks * [Support Threads](https://wordpress.org/support/theme/tracks/) * [Active Topics](https://wordpress.org/support/theme/tracks/active/) * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/) * [Reviews](https://wordpress.org/support/theme/tracks/reviews/) * 12 replies * 3 participants * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/) * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/centering-header-9/#post-9083271) * Status: resolved