CoursePress Pro Theme: How to change logo size

We want to upload a slightly larger logo to coursepress theme, and we want the logo to be vertically centered in the header. I expected to find the necessary php to edit in functions.php and style.css, but I'm either missing something or looking in the wrong place. Any insight into how to change and position a slightly larger logo in the coursepress pro theme is much appreciated.

  • Michael Bissett
    • Recruit

    Hey Christian, Michael here! :slight_smile:

    Looking at the "course" subsite on your Multisite, I see that the logo you've got uploaded there is already quite large, could you try inserting the following CSS code:

    #coursepress_logo {
        max-width: 320px;
    }
    
    .site-branding {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        float: none;
    }
    
    #site-navigation {
        padding: 20px 0px;
        margin-top: 0;
    }

    Into a plugin like Simple Custom CSS:

    https://wordpress.org/plugins/simple-custom-css/

    And seeing if that provides the look you're going for?

    Please advise,
    Michael

  • Christian
    • The Incredible Code Injector

    I currently have a slightly modified version of the css you provided:

    #coursepress_logo {
        max-width: 300px;
    }
    
    .site-branding {
        width: 100%;
        max-width: 1000px;
        max-height: 100px;
        margin: 0 auto;
        float: none;
    }
    
    #site-navigation {
        padding: 20px 0px;
        margin-top: 0;
    }

    This has brought the logo to the size we want and moved it back over to the left. What is the best way to bring the header size down? It still appears that the logo is sitting on top of the navigation, instead of being vertically centered with each other.

  • Christian
    • The Incredible Code Injector

    Edited stylesheet to the following:

    #coursepress_logo {
        max-width: 300px;
    }
    
    .site-branding {
        width: 100%;
        max-width: 300px;
        max-height: 100px;
        margin: 0 auto;
        float: left;
    }
    
    #site-navigation {
        padding: 30px 0px;
        margin-top: 0;
    }
    
    .main-navigation {
        color: #666666;
        float: right;
        font-family: "Lato",sans-serif;
        font-size: 18px;
        margin-top: 10px;
        text-align: right;
        width: 50%;
    }

    That seems to get the logo and navigation back to sitting in line with each other. Still looking for a way to reduce overall header height.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.