-
Posts
-
Need to have three logos in the header. One on left, one centered, and one right. Where all but the center one is hidden on mobile. How would I go about tackling this?
EDIT :
Found this : http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/Works GREAT! So I just need one more on the right side. Could you post the code needed for that? Thanx!!
Hey Michae1!
Please add two text widgets and the html to display the logos in the Appearance > Widgets > Header.
Enable Custom class name support for Advance layout Builder Elements
Give the text widgets unique class names and target them using custom CSS.
Cheers!
VinayHi Vinnie,
Thought I had a fix for this, and it SORTA worked, but it was kludgy. Just embedded the third logo on the right into the background image, but it doesn’t scale/responsive well :\
So . . . I think I hear what you’re saying, but could you post the CSS to accomplish the following goal?
- Desktop : Show all three logos, where they are left, center, and right aligned
- Mobile & Tablet : As soon as the hamburger menu is shown, hide the logo (date) on the right.
Thanx!
Hi!
Thank you for the info.
Instead of using a widget, please add this code in the functions.php file:
// additional logo add_filter('avf_logo_subtext', 'avf_logo_addition'); function avf_logo_addition($sub) { $sub .= "<a class='second-logo' href='#'><img src=' _IMAGE_URI_HERE_' /></a>"; $sub .= "<a class='third-logo' href='#'><img src=' _IMAGE_URI_HERE_' /></a>"; return $sub; }Adjust the image url. And use the following css code to adjust the position of the logo:
.second-logo { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); } .third-logo { position: absolute !important; top: 0; right: 0; } .logo { width: 100%; }Best regards,
IsmaelFantastic! This worked PERFECT Ismael! Thank you!
Just one follow up question. Can I call another class like “only_desktop” <- using this from another thread, very handy > and somehow link it to the third logo here so it’s automatically hidden when the mobile/hamburger menu pops up?
I know I can do a separate @media call for that, but I’m wondering if I can just reuse the class that already does it. So basically, can I call a class from within another class?
Hey!
Glad you got it short out.
Yes, based on how you describe it, it should work properly.
Check it and if not, we are still here for you :-)Best regards,
BasilisHi Basilis,
Sorry I might not have been clear. Was wondering if it’s possible to link to classes? So I can call .only_desktop from .third-logo in order to not write another @media query specific call. Does that make sense?
Hey!
Meaning you wish to have a another class added to the logo with the class .third-logo? You can add the extra class to the code by putting it next to third-logo.
$sub .= "<a class='third-logo only_desktop' href='#'><img src=' _IMAGE_URI_HERE_' /></a>";Assuming that you have a media query call using the only_desktop class then it should also apply to the logo since it now has that class as well.
Let me know if we are still misunderstanding what you are trying to achieving.
Cheers!
JordanHey!
Perfect! Nope. No more misunderstanding. I think that accomplishes exactly what I was hoping to do. I’ll post back if there’s any issues. Thanx!
~ Michael
Hi!
Please do!
Also would be really helpful to rate our theme, would be amazing!
Thanks a lot for your time and patience!Regards,
BasilisHi everyone!
I’ve used Ismael’s solution for extra logos and it works just fine.
I would also like to have my website title next to first logo(main logo) and tried to use this solutionBut nothing seems to work, I was wondering if the two codes may not go well together.
Thank for any hints or suggestion.Laura
Hi @ETA-Florence,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardSure, thank you!
I would also like to have the 2 logos on the right slightly smaller, and to show only the first one on mobile (the other two should be smaller down).
Thank youHi,
you can make them smaller with this code inside Quick CSS field:
.second-logo img, .third-logo img { height: 75px; }You can hide them on mobile with this code:
@media only screen and (max-width: 736px) { .second-logo img, .third-logo img { display: none; }}Best regards,
AndyThanks,
The two logos are smaller, but I can still see the third one on mobile.
And still could not solve to have website title next to first logo…
help please! :)I correct myself,
Website title shows up by adding the above code to functions, but it is not on the right of the logo, but below it.so it just appears when I’m refreshing the page!
this is the code I have in my functions.php
Hi!
Thank you for the info.
Please use this css code to move the subtext beside the logo.
.logo .subtext { position: absolute; top: 20px; left: 100px; }Adjust the values if necessary.
Cheers!
IsmaelHi again,
I have tried again to use this code to hide extra logos on mobile, but it is not working.@media only screen and (max-width: 736px) {
.second-logo img, .third-logo img {
display: none;
}}I have also add a widget in the header, but it won’t hide anyway.
The ideal to me would be that, on mobile screens, extra logos and widget (that is actually the title for the two logos, appear under the main logo.
If this is not possible, at least hide them.Thanks for your help!
- You must be logged in to reply to this topic.