CSS: Hide certain elements

You can easily hide page elements by using CSS, for example page titles or the default logo.

CSS Command:

You can hide elements with CSS by using the display: none CSS command:

.page-element {
display: none;
}

You have to replace the .page-element class with the right CSS id or class which you like to hide. You can find out the right CSS id or class by using Firebug.

Examples:

Please note that CSS codes are different and depend on the theme you’re using. Most of the time our themes use the same CSS classes and ids, but different CSS styles for each page element.

Hide Logo

#logo {
display: none;
}

Hide all Page Titles

.page-title {
display: none;
}

Hide Page title of a specific page (page with ID 99)

#page-99 .page-title {
display: none;
}

Hide complete Post information

.postmeta {
display: none;
}

Hide Post Author

.postmeta .meta-author {
display: none;
}

Hide category title

.archive-title {
display: none;
}

 


In case you need any help with CSS customizations, we can highly recommend these WordPress Customization Experts.