How To Customise The Header Section In Rise Theme By Thrive Themes

In this Thrive Themes tutorial, I'll show you how to modify and customize the header section on the Rise Theme

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 to.

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 to make it unique to your brand?"

So peeps, whilst 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.

Using custom CSS code to customize the header area in Rise theme

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.

Where to add your custom CSS inside of the Rise Theme

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 image below for example.

customise the header section in rise theme

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.

I made this silly mistake myself when I first started using the Rise Theme some years back. Only because 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 first, and then the menu section after.

Customizing the logo section in Rise Theme

To add a logo to the Rise theme, go to Thrive Dashboard > Rise Theme Options > General Settings and upload your logo there. See image below.

Rise theme logo upload

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.

Adjusting the header height

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 seem to work great.

Customizing the menu section

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 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 -

  • normal;
  • bold;
  • bolder;
  • lighter;

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.

How to solve 'logo too small' on mobile devices issue in Rise Theme

One of the most common issues with the logo in responsive design in 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;
}
}

Testing everything

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.

If you have any questions or require assistance, please check out my WordPress design services page here.

To learn more about the Rise theme from Thrive Themes, click here.

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.

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates

14 comments on “How To Customise The Header Section In Rise Theme By Thrive Themes”

  1. Hi Fabrizio,
    Awesome guide. I had searched the whole of internet and could not find a tutorial on this. I can't thank you enough. 🙂

    Is there a way to add a small line or shadow (thin) along the menu bar at the bottom?

    My second doubt is, can we have the sidebar color match the blog page background color (like you have white background but the sidebar looks a bit grayish) and at the same time decrease its width a bit?

    Thank you 🙂
    -Swadhin

    1. Hi Swadhin, thanks for your comment, so glad you found value in this small tutorial. I have many more tutorials in the pipeline over the next few weeks on Thrive Customisation.

      To answer your questions for now though. I will do some more development work to see if its possible to add a thin line below the menu, then I will update this post accordingly if I find a way.

      As for the sidebar? Yes, keep an eye out for the next few tutorial posts coming out in a few days on footer and sidebar customisation. I'm writing these as I learn myself 🙂

      Thanks for stopping by Swadhin 🙂

      1. Fabrizio,
        Trust me, self learning is the best and helping the code-defunct ones with your skills is the next best thing.
        Yes, This was very useful. I asked the thrive people, saw many of their recorded videos and this particular issue was solved nowhere. I never thought I could find any solution.

        Thanks for your timely post, I have for now customized my nav bar as I like.
        Definitely looking forward to your future tutorials. 🙂
        Good luck and thanks again 🙂
        -Swadhin

      2. Fabrizio,
        Trust me, self learning is the best and helping the code-defunct ones with your skills is the next best thing.
        Yes, This was very useful. I asked the thrive people, saw many of their recorded videos and this particular issue was solved nowhere. I never thought I could find any solution.

        Thanks for your timely post, I have for now customized my nav bar as I like.
        Definitely looking forward to your future tutorials. 🙂
        Good luck and thanks again 🙂
        -Swadhin

  2. Hi Fabrizio,
    Awesome guide. I had searched the whole of internet and could not find a tutorial on this. I can't thank you enough. 🙂

    Is there a way to add a small line or shadow (thin) along the menu bar at the bottom?

    My second doubt is, can we have the sidebar color match the blog page background color (like you have white background but the sidebar looks a bit grayish) and at the same time decrease its width a bit?

    Thank you 🙂
    -Swadhin

  3. Oh yeah so nice. I'm going to use this theme for my blog, I'm a big fan of Thrives Themes.

    But Mr Fabrizio,

    I see RISE Themes have 6 colors scheme but I don't know where to change this color after install this themes ?

    Can you guide me more about RISE ?

    Thank you 😀

  4. Hi Fabrizio I also looked around the net for this and could not find anything.. The code to change the menu font size isn't working for me any other advice or another code?

    1. Hi Adrian, thanks for your comment and question.

      I had a look at the code I'm using to increase menu font size for this site and it's working perfectly fine.

      Here are some screenshots.

      The images show the before and after code adjustments to increase font size.

      You need to ensure that you're clearing the cache if you're using a cache plugin.

      Also, the code is probably best placed at the top of the Custom CSS box in your Thrive Theme rather than below any other CSS codes.

      Hope this helps. Let me know how you get on.

      Regards - Fabrizio.

  5. Hi Fabrizio I also looked around the net for this and could not find anything.. The code to change the menu font size isn't working for me any other advice or another code?

  6. HI! Thanks so much for sharing this knowledge. I'm not a coder and it would take me months to figure out that navigation css by most likely pure luck. Obviously I'm having a problem with my nav header being too large for my liking and couldn't figure out how to adjust it. Appreciate it. Regards

  7. Hi M Imran, thanks for your question.

    The size of your image doesn't sound like it could be an issue, however, the quality of your logo could be the issue. What theme are you using? What's the URL of your site as well?

  8. Thank you for this! I'm struggling to add copy to a layer slide that recognizes paragraphs. I also need the font size to be readable for people with "mature eyes." 😉

Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link