WPTip – Centering Heading and Navbar in Twenty Seventeen

Recently I decided to make a few aesthetic changes to my IT page. I wasn’t doing anything crazy, just wanted to center a few items with some custom CSS and center both the navbar and the page titles.

The first thing I did was download the plugin “WP Add Custom CSS” so I could modify some CSS outside of the theme customization page, due to it disappearing with theme updates. Custom CSS plugins like this also allow you to override settings quickly without having to dig into your ftp and modifying your theme’s stylesheet. They also allow you to get rid of your changes and revert them quickly without having to archive anything, or worry about version control.

wordpress custom css plugin

Once you open the plugin’s page, there’s just one text entry area to modify CSS properties. Since both of these are text areas, we’re going to be using the <pre>text-align</pre> property to change where these items sit on the page. Thankfully it’s quite easy:

To edit the header use the following code for the Twenty Seventeen theme

.entry-header {
text-align: center;
}

To edit the nav bar use the following code for the Twenty Seventeen theme

.top-menu {
text-align: center;
}

And that’s all there is to it – just save these new rules and they should automatically apply to your page.

CSS Rules

 

Leave a Reply

Your email address will not be published. Required fields are marked *