Tagged: 

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • September 13, 2017 at 5:19 pm #851668
    Krissieg

    Hi guys,

    What’s the best way to add another image to the header next to an existing logo?

    http://prntscr.com/gkp92y

    My client has asked for another logo to be added next to their existing Service Integrators logo, but to the right of it.

    Can you suggest how I do this? Would it be possible to have a link added to the extra logo as well?

    Thanks,
    Krissie

    September 13, 2017 at 5:24 pm #851670
    Yigit

    Hey Krissie!

    Please refer to this post – http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ and add a widget area to your header and place your image inside header widget area.

    Best regards,
    Yigit

    September 13, 2017 at 6:25 pm #851688
    Guenni007

    or you misuse the method to add text to the logo and add the following to your functions.php of your child-theme:

    add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= " <a href= 'the link target url'> <img class='anything'  title='anything'   src='link to your image'    alt='anything you like' /></a>  ";
  return $sub;
}

    add this to quick css :

    .logo a {
    float: left;
}

    but pay attention with single and double quotation marks ! – and if you like to open the link of that second logo on a blank page :

    add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= " <a href= 'the link target url'  target='_blank' > <img class='anything'  title='anything'   src='link to your image'    alt='anything you like' /></a>  ";
  return $sub;
}

    the benefit is – that even shrinking is possible – because it is in the logo container and makes everything the normal logo does.

    see here https://webers-testseite.de/

    for small screens you can make some media queries on how to handle the thing – maybe you go to display: none or something else

    October 17, 2017 at 1:49 pm #865280
    Krissieg

    Hey Yigit,

    Thanks for the code, but I’m not really happy with how the logo works when added into the header next to the original logo. How do I make it behave the same as the existing logo? Or disappear on mobile at least? Is Guenni007 correct? @Guenni007, thanks for your suggestion and would i add your code in addition to Yigit’s code or instead of? ;)

    Cheers,
    Krissie

    • This reply was modified 7 years, 1 month ago by Krissieg.
    October 18, 2017 at 10:13 am #865611
    Victoria

    Hi Krissie,

    Can you show us what you’ve got so far?

    Best regards,
    Victoria

    October 18, 2017 at 10:21 am #865614
    Krissieg

    I’ve added it to this website for now:

    Livewell Community

    The logo won’t stay there for long, as it’s not correct. I’m testing it out for now.

    Thanks

    October 19, 2017 at 5:29 pm #866334
    Victoria

    Hi Krissieg,

    Ok, so do you need to hide it on mobile or do something else with it?
    Try the code below:

    
@media only screen and (max-width: 768px) {
  #text-8 {
    display: none;
  }
}
@media only screen  and (min-width: 769px) and (max-width: 1050px) {
  #text-8 {
    margin-left: 200px;
  }
}
@media only screen  and (min-width: 1051px) {
  #text-8 {
    margin-left: 70px;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 19, 2017 at 5:42 pm #866347
    Krissieg

    Hey Victoria,
    I’d ideally like the logo to behave like the main logo? Is this possible?

    Thanks

    October 19, 2017 at 6:13 pm #866375
    Krissieg

    I really want to create something like Nike. On the far right of the page they have little flags showing: http://prntscr.com/gzfpgk
    And when you click on it you get to this page:
    https://www.nike.com/language_tunnel

    Can you recommend something for me to achieve a similar effect?

    Thanks,
    Krissie

    October 22, 2017 at 6:24 pm #867245
    Mike

    Hi,
    For your logo have you tried Guenni007 solution?
    For the flags try adding a custom social icon which would be in the top right hand of your page. Then link it to a new page that you can build to look like the nike page, or use a language plugin.

    Best regards,
    Mike

    October 22, 2017 at 6:56 pm #867264
    Guenni007

    hm a few weeks ago your request – and now my example has gone – anyway.
    No – my solution is a single solution no additional code :lol:

    to functions.php of your child-theme:

    add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= " <a href= 'the link target url'  target='_blank' > <img class='anything'  title='anything'   src='link to your image'    alt='anything you like' /></a>  ";
  return $sub;
}

    to quick css:

    .logo a {
    float: left;
}
.logo img {max-width: 200px}

    the gimmick is that you can use a different link , a different link-behavior (open in new tab etc) and it did all the normal logo does – even shrinking is possible.
    The other problematik is a thing that all users have if the logo is more or less a panorama apect ration. Has nothing to do with two logo or not.
    You have to have an earlier breakpoint for responsive behavior. – thats all
    But try first to set up your header behavior to “Let logo and menu position adapt to browser window” and have a look if this is not better for your big menu.

    You can see it on my test-page here: https://webers-testseite.de/buttons/

    On very small screen – both logos are beneath each other !

    October 22, 2017 at 7:27 pm #867280
    Guenni007

    Tell me if you have seen and understand the procedure.
    then i will get rid of your logos and reconstruct my settings.

    October 23, 2017 at 5:49 am #867453
    Rikard

    Hi Krissieg,

    Did you try out the suggestion in the thread? Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    October 23, 2017 at 10:31 am #867524
    Krissieg

    Hi gents,

    Thanks for all your help, especially @guenni007 I’ll have a go! :)

    October 23, 2017 at 3:11 pm #867636
    Guenni007

    By the way for Chrome we had to add:

    @media only screen and (max-width: 767px) {
.responsive #top .logo {
    display: inherit !important;
    height: auto !important;
}
}
    October 23, 2017 at 3:17 pm #867640
    Krissieg

    Cool, thanks soo much! :) x

    October 23, 2017 at 5:41 pm #867746
    Victoria

    Hi Krissieg,

    Glad you got it working for you! :)


    @Guenni007     thank you :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 4, 2017 at 9:40 pm #872608
    Guenni007

    I guess he needed – because status quo is still a big logo – not two of them.

    November 28, 2019 at 5:13 pm #1161059
    dellato

    What about making this work in different languages? Any idea?

    November 29, 2019 at 12:13 pm #1161207
    Mike

    Hi,
    Is the css that @Guenni007 not working in some languages, or do you want it to work only in some languages?

    Best regards,
    Mike

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