The the site-description class has a float left property you need to remove, check out this link: [Redacted]
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hi @joesc, thanks for helping out we appreciate it! You can post links to images here through resources like Snaggy, which means you can make your posts super and not need to link to another blog post unless it’s necessary.
In the case for CSS modifications it’s best not to modify the theme’s files and instead use a plugin or Child Theme for these customisations.
@wal06003, Instead of displaying your image in your header as a block element I’d just keep it as inline and apply ‘text-align’ of ‘center’ to the parent element. In fact that’s already applied to the parent element, and expanding on what @joesc identified, the issue here is that your parent element is floated left and when things are floated left they lose their 100% width.
As you can see, using Chrome’s built-in developer tools, the parent element has a 477px width when it has been floated left: http://snag.gy/FmYvQ.jpg
So just override that float on the parent, and override the display of block on the image.
#site-title {
float: none;
}
#site-title img {
display: inline;
}
The navigation menu needs to be treated differently. The reason for this is that the ‘margin: 0 auto’ technique, for most elements, relies on a width being set to the element first. You don’t want to set a width on the navigation menu because you don’t want it to wrap onto 2 lines and you don’t know how wide it’s going to be. You can add menu items, remove them, change the amount of words in them, it’s not stable enough to set a width.
So you need to take a different approach.
Maybe you can display the menu as an inline-block element and then apply ‘text-align’ of ‘center’ to the parent element, just like the site title. And I think the menu may have the float problem too!
Generally when looking to center things this resource by the W3C shoudl help better: http://www.w3.org/Style/Examples/007/center.en.html
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications.
Alternatively use your Child Theme style.css file to hold your CSS modifications.
Thank you both very much! I was able to get my site logo and navigation bar to final start centering itself regardless of the screen size. The changes that I made, however, appear to have created another (small) problem – if you look at my site you will see that the container holding the navigation menu has a height that is 6 pixels taller than the actual menu items. The menu options each have a height of 21 pixels, with 15 pixels of padding on both top and bottom. This comes to a total of 51 pixels for the menu items. The container, however, is now automatically being created with a pixel height of 57, thus there appears to be 6 extra pixels of container height on the bottom of the menu items.
It appears to be an issue with the menu now being displayed as inline-block. When I remove the inline-block display option the problem is fixed, but obviously my menu is no longer centered. I notice that there is a second container created around the menu when it is displayed as inline-block – I am not sure if this is part of the problem or not, as both of the created containers seem to automatically be created with the pixel height of 57.
Thanks again ahead of time.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oh maybe the navigation recommendation wasn’t the right one for you, try this code instead:
#access ul {
display: table;
margin: 0 auto;
}
Display ‘table’ gets around the necessity to define a width.
That worked great. Thank you!
