Hi Joe, if you could provide a link to your site that’d be a great start, and let me know where you’d ideally like to move the logo. Thanks!
Hi Kathryn,
It wouldn’t be any use linking to the site at the moment — there’s nothing much there, and no logo until I finish designing it and figure out how to position it.
Are you able to give general instructions on how I would go about editing the position (eg, to move it 50 pixels higher and 20 pixels to the left of its default position, or to position it at a percentage position on each axis)?
This should get you on the right track:
img.site-logo {
margin-left: 50px;
margin-top: -20px;
}
When changing positioning with CSS, be sure to consider and test smaller screens. If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
That’s great Kathryn,
Thanks very much for your help!
