customizing headers | PenciDesign Support

PenciDesign replied

5 years ago

Staff Reply

Hi,

Here is your custom css code now:

body.penci-custom-logo #navigation.header-6 #logo img {
    padding: 1px 0;
    padding-top: 12px;
    height="1400px" width="auto": ;
}

It's wrong on line:

height="1400px" width="auto": ;

It should be:

body.penci-custom-logo #navigation.header-6 #logo img {
    padding: 1px 0;
    padding-top: 12px;
    height: 400px;
    width: auto;
}

But, even when the code is correct, you still can't change the logo image size by use this way. Because your main navigation has the height is 82px, and the logo can't be has more height than main navigation.

If you want to get more height for main navigation, please change the main navigation height via Customize > Logo & Header > General > Main Navigation Height

Best Regards,

PenciDesign

megm replied

5 years ago

Customer Reply

Thank you... I am attaching a screen shot for my snippet, and also the code in my css.

Something isn't working, the size of the logo does not change.

body.penci-custom-logo #navigation.header-6 #logo img{ padding: 1px 0; padding-top:12px; height="400px" width="auto"}

PenciDesign replied

5 years ago

Staff Reply

Hi,

If so, please try install plugin Code Snippets and put this code inside Code Snippets:

if ( ! function_exists( 'penci_add_body_class_custom_logo' ) ) {
    add_filter( 'body_class', 'penci_add_body_class_custom_logo' );
    function penci_add_body_class_custom_logo( $classes ){
        
        if ( is_page() ) {
            $pmeta_page_header = get_post_meta( get_the_ID(), 'penci_pmeta_page_header', true );
            if ( isset( $pmeta_page_header['custom_logo'] ) && $pmeta_page_header['custom_logo'] ) {
                $classes[] = 'penci-custom-logo';
            }
        }
        
        return $classes;
    }
}

After that, change the custom css code I sent to this code:

body.penci-custom-logo #navigation.header-6 #logo img{ padding: 1px 0; }

Best Regards,

PenciDesign

megm replied

5 years ago

Customer Reply

Thank you... is there anyway to do this by attaching a class to the page? I will have quite a few pages with that logo.

PenciDesign replied

5 years ago

Staff Reply

Hi,

Ok, so the best solution here is add more this custom css code to Customize > Custom CSS to make it more height on that page:

body.page-id-8807 #navigation.header-6 #logo img{ padding: 1px 0; }

With 8870 is Page ID of the page: https://cynthia-reeves.com/projects-landing/

You can check this guide to know how to find ID of a page.

Best Regards,

PenciDesign

megm replied

5 years ago

Customer Reply

This is for a different site: https://cynthia-reeves.com and the second logo is https://cynthia-reeves.com/projects-landing/

I can't put my finger on the CSS to make the second logo bigger -- taller -- but only the second one. There is a subset of pages that will contain that logo.

PenciDesign replied

5 years ago

Staff Reply

Hi,

Can you tell me more detail about this issue? I'm not clear about this, where is your second logo ( an URL for this )? I checked https://www.stmichaels-vt.org/ and I didn't see the second logo.

Best Regards,

PenciDesign

megm started the conversation

5 years ago

Conversation Start

I want to have a different logo for two distinct sections of my site.

I can see where to change the logo on each individual page, which is great. But one of my logos is very horizontal, and the other is too square. If the squarish one is the same height as the horizontal, it isn't wide enough. I need to make the second logo deeper. How do I manage to customize that with CSS?

The client wants to use the horizontal version of the header.