MH Magazine Theme Custom Modifications Using CSS (16 Best Mods.)

When you’ve already installed or have started using Mh magazine WordPress theme just like Naijatechnews and have started publishing awesome content, sometimes there is need for minor customizations that are beyond a standardized options panel and require custom coding. While theme customizations are beyond regular theme support, we will be sharing 16 customization to Mh magazine to make your theme smooth using common CSS customizations for MH Magazine which you can apply to your Mh magazine website theme and modify these customizations as you like.

How to inspect CSS code on your site?

In order to inspect CSS code on your site, you could have a look at the stylesheet (style.css) of your theme or your browser’s inspect tool your browser’s inspect tool which you can use to inspect the elements on your site, see how the CSS code has been applied and then use that to make your own customizations. This also might be helpful.

How to apply custom CSS code to your site?

There are several ways of how you can apply custom CSS code to your site. But one thing you really shouldn’t do is modifying the original theme files, because these changes will be lost after theme updates. To apply custom CSS code to your site, you either could use the option in your WordPress dashboard => Appearance => Customize => Theme Options => Custom CSS, install a plugin for custom CSS code (e.g. Simple Custom CSS) or make use of a custom child theme.

Custom CSS code for MH Magazine

These are examples of how you can change CSS code in MH Magazine. Feel free to use this code and modify to meet your personal requirements:

.mh-custom-header { text-align: center; }

.mh-main-nav ul { display: table; margin: 0 auto; }

.mh-main-nav li a { padding: 10px 20px; }

.mh-main-nav { text-transform: none; }

.mh-main-nav { display: none; }

@media screen and (max-width: 767px) {
    .js .mh-header-nav { display: block; }
}


@media screen and (max-width: 767px) {
    .js .mh-extra-nav { display: block; }
}


.page-title { display: none; }

.mh-ticker-item-date { display: none; }

.mh-ticker-item-cat { display: none; }

.entry-tags { display: none; }

.mh-image-placeholder { display: none; }

.mh-sidebar { display: none; }
.mh-content { width: 100% !important; }


.mh-copyright { text-align: center; }

.mh-carousel-caption { display: none; }

.mh-slider-title { font-size: 24px; }
.mh-slider-content .mh-excerpt { font-size: 14px; }

We will be adding more time to time.

Hope the article was helpful?
Kindly leave us with a comment below.