![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: header, main-menu, multiple widgets, Widget
-
AuthorPosts
-
September 27, 2020 at 5:03 pm #1248825
Dear Team,
I read some topics and the documentation about widgets and how to implement them, but I struggle a little bit (Endold Version: 4.6.1)What I need are 4 widgets as shown in this picture I designed – https://imgur.com/UDJ9DLn
I added the following code to functions.php:
`
add_action( ‘ava_before_bottom_main_menu’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
dynamic_sidebar( ‘header-two’ );
dynamic_sidebar( ‘header-three’ );
}`Then I also added the following css code to the customizer:
#header .widget:nth-child(1) { left: auto; right: 50%; padding-top: 0; position: absolute; top: 15%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(2) { left: auto; right: 25%; padding-top: 0; position: absolute; top: 15%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(3) { left: auto; right: 0%; padding-top: 0; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; }
Now I struggle with the following issues (marked in the red rectangles) – https://imgur.com/a/6e6VZoc
Do you have any hint for me or do you know how to get the result what I designed in the first picture (symbols + text widgets)
Thank you in advance and Best regards.
-
This topic was modified 3 years, 11 months ago by
apflbutzn.
September 27, 2020 at 7:13 pm #1248856Hey apflbutzn,
We cannot see the images.
You can upload screenshots to a service like Dropbox or http://imgur.com and give us the links here.
Best regards,
VictoriaSeptember 28, 2020 at 4:29 pm #1249079Hey Victoria
I updated my first post and added the links.
Best regards
-
This reply was modified 3 years, 11 months ago by
apflbutzn.
September 29, 2020 at 6:18 pm #1249465Any update here? :-)
Bes regards
September 30, 2020 at 4:31 am #1249552Hi,
You need to adjust the line height of the paragraphs in your widgets:
#header .widget p { line-height: 15px; }
Then place them all in an absolute position:
#header .widget { position: absolute; }
Then you need to adjust the position of them individually, by targeting their IDs. This would target the most right one for example:
#text-4 { top: 0; right: 0; }
Best regards,
RikardOctober 1, 2020 at 4:33 pm #1249902Yep, that works – thank you very much :-)
October 2, 2020 at 4:40 pm #1250131Hi apflbutzn,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria -
This topic was modified 3 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.