Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #673491

    Hi there,
    I’m wondering if it’s possible to send me the coding to add a secondary logo on the right hand side?

    #673588

    what kind of header did you choose:
    sticky, logo left menu below etc.

    #673803

    Sticky logo left

    #673817

    Sorry that wasn’t correct
    The header is:
    menu and logo position: logo left, menu below
    style: minimal with no drop shadows (no borders, indicators or transparency)
    separator between menu items: small separator
    header size: large
    Not a sticky header

    #673930

    ok.
    are you familiar with using a child-theme?
    you can place the following code to your child-theme functions.php:
    you can insert here a link target to the second logo!

    function second_logo($logo) {
    $logo .= '<strong class="logo second-logo"><a href="link-url" target="_blank">' ;
    $logo .= '<img src="path to your second logo - absolut path is best here"/>';
    $logo .= '</a></strong>';
    return $logo;
    }
    add_filter('avf_logo_final_output', 'second_logo');

    than you have to play a bit in your quick css f.e.

    .logo.second-logo {
        float: right;
        position: relative !important;
        z-index: 2;
    }
    
    .responsive #top .logo {
        height: auto !important;
    }

    you can see a result of that here: http://webers-testseite.de/ikom/
    And you see it works with shrinking header too! You than have to define what happens with the second logo in responsive case.
    Some decide to display logo2 to none.

    #673933

    btw. on the example above i centered the navigation in this way:

    .html_header_top.html_bottom_nav_header .main_menu ul:first-child {
        display: inline-flex;
        margin-left: 50%;
        transform: translate(-50%);
        white-space: nowrap;
        width: auto !important;
    }
    
    .html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
        float: left;
    }
    #673990

    Great – thank you! What if I wanted to have 2 logos in this area side by side with a little padding between them?

    #674078

    same code in child-theme functions.php but instead of css code above try this here (padding-right is the logo distance):

    div .logo {
        float: left;
        padding-right: 25px;
        left: 0;
        position: relative;
        z-index: 1;
    }
    
    .logo.second-logo {
        float: left;
        position: relative !important;
        z-index: 1;
    }
    
    .responsive #top .logo {
        height: auto !important;
    }

    see link: Link

    #674265

    Thank you so much for your time at this.
    It’s not quite what I’m looking for. I want 2 logos on the far right and the main company logo on the left.

    #674267

    it is very nice when you come with your request bit by bit. :wink
    first request was “additonal logo on the right hand side”
    next two logos left littel padding
    next now : main logo left two additional logos on the right
    i think i will wait till you have found your final layout – sorry

    Edit: and please think about what has to happen for small screen layout (Smartphones, Tabletts in portrait orientation)
    Three logos (main logo left , two logos floating on the right )

    • This reply was modified 7 years, 7 months ago by Guenni007.
    #674284

    is that what you want: http://webers-testseite.de/ikom/

    #674288

    Yes – but the responsive isn’t working properly on your sample.

    #674289

    in what way not !
    what is propper – describe the behavior you like to have – i’m no mind reader at all

    the more precise is the request – the more specific is the solution!

    #674512

    The right side logos are warped when you bring down your browser screen size and they are aligned differently one on each side.

    #674514

    Sorry about that I just looked at it again and it’s exactly what Im looking for. Not sure why earlier it was functioning funky. It looks perfect now.
    Are you able to send the quick css?

    #675027

    not the quick css only .

    first same as with two logos now three (that is for functions.php of child-theme):

    
    function second_logo($logo) {
    $logo .= '<strong class="logo second-logo"><a href="logo2link" >' ;
    $logo .= '<img src="/wp-content/uploads/logo2.png"/>';
    $logo .= '</a></strong>';
    return $logo;
    }
    add_filter('avf_logo_final_output', 'second_logo');
    
    function third_logo($logo) {
    $logo .= '<strong class="logo third-logo"><a href="logo3Link" target="_blank">' ;
    $logo .= '<img src="/wp-content/uploads/logo3.png"/>';
    $logo .= '</a></strong>';
    return $logo;
    }
    add_filter('avf_logo_final_output', 'third_logo');

    you have to adapt those settings (logo2Link, logo3Link and the name path to your logos)

    now my quick css (the values are pending to the logos itself. you have to play with those values – in my case i have choosen logo width in this way that on ipad landscape all logos fit the screen without floatin)

    div .logo {
        float: left;
        padding-right: 25px;
        left: 0;
        position: relative;
        z-index: 1;
    }
    
    .logo a {
        max-width: 300px;
    }
    
    .logo.second-logo, .logo.third-logo {
        float: right;
        position: relative !important;
        z-index: 1;
    }
    
    .responsive #top .logo {
        height: auto !important;
    }

    if it does not look like you want it – without the link to your site i cannot give help here.
    So either post here public the link to it. Or make it in private content – than you have to wait for mods here.

    BTW. I’m testing myself on that playground the ubermenu integration – so it does not look like before because i replaced Enfold Navigation with UberMenu.

    #675035

    btw. if you like to place a svg-file integration is different:

    function second_logo($logo) {
    $logo .= '<strong class="logo second-logo"><a href="url2">' ;
    $logo .= file_get_contents("/wp-content/uploads/logo2.svg");
    $logo .= '</a></strong>';
    return $logo;
    }
    add_filter('avf_logo_final_output', 'second_logo');

    and on quick css you than need a value for width and for some browsers a height value:

    f.e.

    .third-logo img {
       width: 240px;
       height: auto
    }
    #676117

    Perfect – thank you!
    The only thing that I would like to see is the second and third logo to be side by side on tablet and mobile screens instead of stacked. Is this possible?

    #676479

    i do not see your site – so i can not help you –
    i mentioned above that i have made this for my solution for ipad landscape. This depends on the logos and the logo width.

    so play a bit with those values of logo width.
    And a good advice is to make the images the same size on your graphic program.

    • This reply was modified 7 years, 7 months ago by Guenni007.
    #677821

    Hi,

    try this code:

    @media only screen and (max-width: 1024px) {
    .logo.second-logo, .logo.third-logo {
    display: inline !important;
    }}
    

    Best regards,
    Andy

Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.