How to Resize Logo? CoursePress Pro

Hi, I was wondering how to resize my logo so that it fits in-line with the courses, dashboard and logout menu icons on the right hand side. I want my logo to not create a space between the line and those menu icons...Please let me know how to do this. My website is http://americanmoldacademy.com/

  • Adam Czajczyk

    Hello Savana,

    I hope you're well today and thank you for your question!

    I took a look at your site and I can see that the logo seems to be currently a bit misplaced but I'm not exactly sure where would you like to put it. That said, I've experimented a bit with your site's layout and came up with theses CSS rules:

    .site-branding {padding:0px;margin-top:0px;}
    .site-title {padding:0px;margin-top:0px;}
    .site-title img {margin-top:-20px;padding-top:0px;height:60px;}

    To apply them to your site either add them to the style.css file of your current theme's child theme (if you're using child theme) or via "Simple Custom CSS" ("Appearance -> Custom CSS" box) plugin that you will find here:

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

    Would you please give it a try and let me know how it worked for you? If this will need further adjustments, just let me know please and I'll be glad to help!

    Best regards,
    Adam

  • Savana

    Hi Adam, Thank you for your reply... I experimented a bit and I think I found where I want my logo to be placed, but of course I am still having a few issues. Here is the css code I have so far:

    .site-branding {
    position: relative;
    top: 8px;
    left: 2px;
    width: 100%;
    max-width: 384px;
    }

    .main-navigation {
    width: 60%;
    }

    .site-header {
    height: 10%;
    max-height: 50px;
    }

    Now, The the thing is, is that I want to make the logo larger but when I attempt to do this it causes the courses/login links to move further down the page... I want the logo to stay on the grey line in the position it is in along with the American Mold Academy text...(No need to worry about the text so much...I can always re-position that)
    Also, I want to be able to move everything at the top of the page, further up so that the courses/login links, as well as the grey line are as far up as they can go.

    I know that probably sounds confusing, but let me know if you can help me figure this out, or if you need further explanation. Thanks for all of your help in advance!

  • Predrag Dubajic

    Hi Savana,

    I must admit I'm a bit confused here but with some explanation we can work this out :slight_smile:

    First thing is you navigation size, it's currently set to 60% with this code:

    .main-navigation {
    width: 60%;
    }

    That's causing it to drop down when you increase logo size since there's no space for both of them to fit in, changing the width to auto should do the trick:

    .main-navigation {
    width: 60%;
    }

    You can reduce site-header height by reducing padding size, to your .site-header add padding-top: 10; so it looks like this:

    .site-header {
        height: 10%;
        max-height: 50px;
        padding-top: 10px;
    }

    Below is screenshot of how it should look with these changes applied so let us know if that's what you're looking for :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.