-
AuthorPosts
-
August 17, 2016 at 5:46 am #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?August 17, 2016 at 9:41 am #673588what kind of header did you choose:
sticky, logo left menu below etc.August 17, 2016 at 5:09 pm #673803Sticky logo left
August 17, 2016 at 5:52 pm #673817Sorry 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 headerAugust 18, 2016 at 1:03 am #673930ok.
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.August 18, 2016 at 1:05 am #673933btw. 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; }
August 18, 2016 at 4:58 am #673990Great – thank you! What if I wanted to have 2 logos in this area side by side with a little padding between them?
August 18, 2016 at 8:22 am #674078same 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
August 18, 2016 at 5:32 pm #674265Thank 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.August 18, 2016 at 5:39 pm #674267it 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 – sorryEdit: 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 8 years, 4 months ago by Guenni007.
August 18, 2016 at 6:00 pm #674284is that what you want: http://webers-testseite.de/ikom/
August 18, 2016 at 6:07 pm #674288Yes – but the responsive isn’t working properly on your sample.
August 18, 2016 at 6:13 pm #674289in what way not !
what is propper – describe the behavior you like to have – i’m no mind reader at allthe more precise is the request – the more specific is the solution!
August 19, 2016 at 6:33 am #674512The right side logos are warped when you bring down your browser screen size and they are aligned differently one on each side.
August 19, 2016 at 6:36 am #674514Sorry 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?August 20, 2016 at 3:42 pm #675027not 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.
August 20, 2016 at 4:14 pm #675035btw. 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 }
August 23, 2016 at 2:41 am #676117Perfect – 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?August 23, 2016 at 3:45 pm #676479i 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 8 years, 4 months ago by Guenni007.
August 25, 2016 at 10:53 pm #677821Hi,
try this code:
@media only screen and (max-width: 1024px) { .logo.second-logo, .logo.third-logo { display: inline !important; }}
Best regards,
Andy -
AuthorPosts
- You must be logged in to reply to this topic.