Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #2593222
customizing headers
Closed

Comments

  •  1
    megm started the conversation
    November 6, 2020 at 8:53pm

    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.

  •  2,699
    PenciDesign replied
    November 7, 2020 at 2:55am

    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

  •  1
    megm replied
    November 16, 2020 at 9:23pm

    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.

  •  2,699
    PenciDesign replied
    November 17, 2020 at 2:16am

    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

  •  1
    megm replied
    November 17, 2020 at 9:14pm

    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.

  •  2,699
    PenciDesign replied
    November 18, 2020 at 2:05am

    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

  •  1
    megm replied
    November 20, 2020 at 9:31pm

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


  •  2,699
    PenciDesign replied
    November 21, 2020 at 1:39am

    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