Header layout with widget overflow - Support | Kriesi.at

Tagged: enfold, header, Overflow

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
April 1, 2019 at 3:41 pm #1085553

babettegcc
Participant

Hello,

i find these (https://kriesi.at/documentation/enfold/example-of-widget-area-overflow/)in the documentation. But i don’t understand how it works.
I put this on the function.php

add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}

and the css to my style.css but i don’t understand what i have to put on the widget.
Can you help me and maybe logged in to the site?

I have to put a image instaed of the yellow Circle.

Best regards

April 2, 2019 at 7:36 am #1085900

Victoria
Inactive Moderator

Hey babettegcc,

Can you please attach a mockup of what you’re trying to achieve?

Best regards,
Victoria

April 2, 2019 at 9:00 am #1085942

babettegcc
Participant

Hello,

here is a mochup. https://www.dropbox.com/s/8ppk3ael1tz5sae/Bildschirmfoto%202019-04-02%20um%2008.56.05.png?dl=0

and I have to put this right Piratoplast Foam Sensitive Sticker overflow on the navigation. So as in this example that had not worked for me.
https://kriesi.at/documentation/enfold/example-of-widget-area-overflow/

April 3, 2019 at 8:11 am #1086417

Victoria
Inactive Moderator

Hi babettegcc,

You need to put the image in the text widget and add that widget to the header. And then we can adjust it for you.

Best regards,
Victoria

April 3, 2019 at 9:39 am #1086445

babettegcc
Participant

Hello,

so i put the image in the text widget (https://www.dropbox.com/s/wc31pq8q0d4zvhp/Bildschirmfoto%202019-04-03%20um%2009.37.07.png?dl=0)

and i put this code to the function-php is it right? (https://www.dropbox.com/s/kr58swizgl3vu9w/Bildschirmfoto%202019-04-03%20um%2009.37.29.png?dl=0)

April 4, 2019 at 9:24 am #1086891

Rikard
Keymaster

Hi,

Yes, that looks correct. I can’t see the widget showing up on your site though, and when inspecting your site the markup doesn’t seem to be from the Enfold theme even though it’s active. I’m not sure why that is?

Best regards,
Rikard

April 4, 2019 at 9:30 am #1086896

babettegcc
Participant

Hey,

the first site is an html site with bootstrap and this site http://wordpress.p192652.webspaceconfig.de/epidermolysis-bullosa/ is the enfold theme then and there i need this image overflow the header.

Best regards.

April 8, 2019 at 2:28 am #1088083
Ismael
Moderator
Hi,

The image in the widget does not display in the header. Please try to replace the “ava_after_main_menu” hook with “ava_main_header”.
```
add_action( 'ava_main_header', 'ava_main_header_mod_header_widget' );
function ava_main_header_mod_header_widget() {
	dynamic_sidebar( 'header' );
}
```
Best regards,
Ismael
April 11, 2019 at 10:44 am #1089492

babettegcc
Participant

Hello Ishmael,

I inserted your code into the function.php instead of the old one.

I still can not see the header widget.

April 12, 2019 at 2:24 am #1089816

Ismael
Moderator

Hi,

It’s still not working. We don’t usually encounter issue with this header/widget modification. How is it that the main site/page (see private field) is using a different theme compare to the “epidermolys-bullosa” page?

Best regards,
Ismael

April 12, 2019 at 4:08 pm #1090081
babettegcc
Participant
Hello,

it works now :)

But i have some problem with the css for desktop and mobil.

for desktop it looks good but the search icon is not round anymore like before (https://www.dropbox.com/s/0acm3gyh2hgo6wm/Bildschirmfoto%202019-04-12%20um%2016.01.13.png?dl=0)

mobile the widget should disappear but the burger menu should get a background and go over the edge how is that possible?
it should look like that: https://www.dropbox.com/s/vs4n0zuuvijr34e/mobile-new.jpg?dl=0

Can you help me with the CSS
- This reply was modified 5 years, 8 months ago by babettegcc.
April 15, 2019 at 3:05 am #1090806
Ismael
Moderator
Hi,

Thanks for the update.

Use this css code to remove the widget and adjust the style of the menu on mobile view.
```
@media only screen and (max-width: 767px) {
.responsive #top #header #header_main .inner-container .widget {
    display: none !important;
}

.responsive #top #header #header_main .inner-container .main_menu {
    position: absolute;
}

.responsive #top .av-logo-container .avia-menu {
    background: red;
    padding-right: 7px;
}
}
```
Best regards,
Ismael
April 15, 2019 at 5:54 pm #1091027

babettegcc
Participant

Hello,

thank you, It’s fine with the Navbar but i can’t see the Search-Icon?
Is there an also a CSS option?

Best regards

April 17, 2019 at 7:13 am #1091816
Victoria
Inactive Moderator
Hi babettegcc,

Please try the following code:
```
@media only screen and (max-width: 767px) {
  #top #header .av-main-nav>li#menu-item-search.menu-item {
    display: block !important;
  }
}
```
Best regards,
Victoria
April 17, 2019 at 9:24 am #1091875

babettegcc
Participant

Hello Victoria,

unfortunately it did not work as i thought. after the code it looks like this: https://www.dropbox.com/s/bbee02w3evxpcdt/Bildschirmfoto%202019-04-17%20um%2009.17.59.png?dl=0

But is it possible to place the search icon next to the logo and just run the navbar over the image? like here: https://www.dropbox.com/s/vs4n0zuuvijr34e/mobile-new.jpg?dl=0

April 18, 2019 at 7:17 am #1092299

Victoria
Inactive Moderator

Hi babettegcc,

The search and the burger are in the same ul, so they cannot really be placed like that. You need to add the search to the header_meta for the mobile.

Best regards,
Victoria

April 18, 2019 at 8:59 am #1092343

babettegcc
Participant

And how can i do this?

Best regards

April 19, 2019 at 10:30 pm #1092765

Basilis
Inactive Moderator

Hi,

Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

Best regards,
Basilis
Author

Posts

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.