In this Thrive Themes tutorial, I'll show you how to modify and customize the header section on the Rise Theme
Important Notice: The 'Rise Theme' is a premium WordPress theme from Thrive Themes that is no longer available. If you are using the Rise Theme on your WordPress website, there is no guarantee that the tutorial below will continue to work.
Thrive Themes create some great looking premium themes.
They're not the best-looking themes on the market, however, what I love most about Thrive themes is that they're robust, easy to manage, easy to customize, and to add some of your own mods too.
One theme from Thrive that I particularly enjoy using the most in my client projects is the Rise theme.
Many moons ago, when I was actually using the Rise theme myself for this website, I used to receive a lot of emails about customization.
I was able to create a pretty unique look for my site, and so one question's that kept coming up was this one -
"How do you customize all of the elements inside the Rise Theme, so as to make it unique to your brand?"
So peeps, while I don't claim to be an expert or specialist in customizing any of the themes developed by Thrive, I have spent a considerable amount of time modifying them, and most of which were for my clients.
So, in this first of hopefully many Thrive themes tutorial posts, I'm going to show you how to customize the header section in Rise Theme, so that you can make the theme more personal to your business or personal brand.
Let's get to it.
We're going to be using some simple custom CSS to override most of the default CSS rules inside the Rise theme header.
Don't worry, you don't need to be an expert in writing code to do this. I'll take you by the hand and show you exactly how to achieve the desired look you want for your website header.
I'll also provide you with some code to use.
I want to address something very important before we make a start on this.
Any CSS that you want to add to customize your theme in any way should be placed in the Custom CSS field provided.
You can find this field by going to Thrive Dashboard > Rise Theme Options > Style And Layout Settings > Custom CSS. See the image below for an example.
Do not place any custom CSS inside of the style.css file under Editor, as these will simply be overwritten when a new update becomes available for the Rise theme (Affiliate link).
I made this silly mistake myself when I first started using the Rise Theme some years back. Only because of other themes I've used in the past you actually did that.
OK, now that's out of the way, let's get started with customizing the Rise theme header area.
In the header area, we're going to first look at the logo section, and then the menu section after.
To add a logo to the Rise theme, go to Thrive Dashboard > Rise Theme Options > General Settings and upload your logo there. See the image below.
A useful tip before adding a logo: If you can, ensure that it's 300px wide by 60px high, especially if you want the logo to appear at the side of your menu and not the top of your menu.
If your logo is going to the top, then you can make your logo a little bit larger if you want.
The reason why I say this is because if you want your logo to appear neatly in the Rise theme (by the side of your menu), without having too much padding at the top or the bottom of the header bar, I've found this particular size to work perfectly well.
You can adjust the height of the header section by adding the following code into your custom CSS box.
header .h-i {
height: 100px;
}
Don't forget to increase, or decrease, the px value marked in red to adjust the height you want for the header section. I personally found that 70px seems to work great.
So that's the logo taken care of, let's move onto the menu section.
I'll assume that you've already created a custom menu in WordPress and that you have assigned this menu to the header nav area.
So here's how you can customize the menu in the Rise theme using some simple CSS.
Add the following CSS code to your custom CSS field to adjust the size of the menu typography and the font-weight.
header nav ul li a {
font-weight: 400px;
font-size: 16px;
}
Don't forget to increase, or decrease, the px/values marked in red to change the font size in the menu to your liking.
If you don't want to use numerical values for font-weight, you can use the following instead -
Click here to learn more about font weights.
If you want to add a completely different font style to the header nav menu, add the following line beneath the header nav ul li a {
font-type: font-name-goes-here !important;
Again, don't forget to change the red part to the font name, for example, 'sans-serif' or 'Open Sans' or 'Roboto'.
You may well need to upload a custom font using font manager in Rise theme before making this work for your menu.
One of the most common issues with the logo in responsive design in the Rise theme is that sometimes the logo can appear too small when viewed on mobile devices.
If this is an issue for you, the following CSS code should help rectify this problem. Just make sure you add this to the very bottom of your custom CSS field box:
@media only screen and (max-width: 940px) {
header.side #logo img {
max-width: 200px !important;
}
}
Test your site on your smartphone or tablet computer to see if your logo resizes as it should be.
You shouldn't have to change the max-width px value marked in red for this one, however, if you need to, just nudge it up or down to achieve the desired results.
If you've added all of these custom CSS codes correctly, adjusted the values to your requirements, your header section should be looking pretty sweet by now.
If it's not looking the way you want it to look, start over again and go through the steps carefully.
To learn more about the Rise theme from Thrive Themes, click here (Affiliate link).
I hope you've found this tutorial useful, I'll have more Thrive Themes tutorials coming soon in the coming months.
Enjoy.
Note: This post may contain affiliate links to products or services that I use in my business and therefore recommend. This means if you click on an affiliate link and make a purchase of a product or service, I may earn a small commission, at no additional cost to you. Thank you for your continued support.
