Tagged: ismael
-
AuthorPosts
-
May 11, 2017 at 1:22 pm #791622
Dear Enfold support team,
thanks for your time and support, the more I work with the theme the more I appreciate it… I have a pretty specific question, but I feel like I am just missing something, and the answer should be obvious (to someone who is more familiar with php then I am):
as described here , I have added an extra image “floating on top” of the slider / image area – with your support. Works great, BUT I would love to right-align the image with the menu above, even when resizing the browser window.This is my addition to my child theme’s functions.php :
add_filter('avf_title_args', 'avf_add_bottom_container', 10, 2); function avf_add_bottom_container($args,$id) { if(is_single) { $args['html'] = "<div class='{class} title_container'><div class='container'><{heading} class='main-title entry-title'>{title}</{heading}>{additions}</div></div><div class='below-title-container container_wrap'><div class='container'></div></div>"; } return $args; }
and this is my additional css:
div.below-title-container.container_wrap div.container { width: 204px; background: url('//private-aircraft-sales.airgo.de/wp-content/uploads/2017/05/airgo_logo-weiss-1.png'); background-color: transparent; background-image: url("//private-aircraft-sales.airgo.de/wp-content/uploads/2017/05/airgo_logo-weiss-1.png"); background-repeat: no-repeat; background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position-x: 0%; background-position-y: 0%; background-size: 70%; height: 50px; } div.below-title-container.container_wrap { position: absolute; border-top-width: 0px; top: 270px; right: 15px; z-index: 10000; }
and I guess the new div needs to be nested inside another div (with a width of 100% ?) be aligned to the elements in the header, but all my attempts lead to unexpected and messy results…
Do you have a better idea?
Thank you!!!May 12, 2017 at 2:21 pm #792309Hey AirGO,
Thank you for the update.
Could you please provide a screenshot of the intended layout of the header? Please try the following.
add_filter('avf_title_args', 'avf_add_bottom_container', 10, 2); function avf_add_bottom_container($args, $id) { if(is_single) { $image = "<img src='http://private-aircraft-sales.airgo.de/wp-content/uploads/2017/05/airgo_logo-weiss-1.png' class='logo-weiss' />"; $args['html'] = "<div class='{class} title_container'><div class='container'><{heading} class='main-title entry-title'>{title}</{heading}>{additions}</div></div><div class='below-title-container container_wrap'><div class='container'>".$image."</div></div>"; } return $args; }
CSS code:
.below-title-container { background: #000; } .below-title-container .container img { width: 204px; height: 50px; position: relative; float: right; margin: 10px; }
Best regards,
IsmaelMay 13, 2017 at 1:36 pm #792695Hi Ismael,
thanks for your reply.
I have tried the codes – which results in this:But I am trying to have that additional image / logo in an invisible container floating “above” the header images / sliders (it’s a co-branding matter) AND stays right-aligned with the menu, even when resizing the browser window, rather like this (color / size of the logo / image does not really matter at this point):
http://private-aircraft-sales.airgo.de/wp-content/uploads/2017/05/mockup.jpg
Thank you!
May 14, 2017 at 1:04 pm #792909Hi AirGO,
It seems to me, that it is more appropriate to use Layer Slider in this case and have this image as a layer or the slide. It has many more options.
If you need further assistance please let us know.
Best regards,
VictoriaMay 15, 2017 at 4:00 pm #793388Hi Victoria,
I do not think that using the layer slider is going to help with aligning the element in a responsive way to the menu – however, I will leave it as is for the moment.
best greetingsMay 16, 2017 at 5:09 am #793698 -
AuthorPosts
- You must be logged in to reply to this topic.