Add Multiple Widgets to Header - Support | Kriesi.at

Tagged: custom.css, header, header widget

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

Author

Posts
April 28, 2016 at 8:06 am #623509

themeforesttony
Participant

I am trying to add three widgets to header.
I have added the following to my child theme functions.php:
add_action( ‘ava_main_header’, ‘enfold_customization_header_widget_area’ );
function enfold_customization_header_widget_area() {
dynamic_sidebar( ‘header’ );
}
(I am using logo with menu below)
I also added this to Quick CSS:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

Is there a way for me to add a second or third widget to header to display in line with the first widget?
Also, how do I prevent the widget(s) from shifting position relevant to the logo as the screen size is shrunk?
Thanks in advance for your help.

April 30, 2016 at 3:37 pm #625057

Josue
Inactive Moderator

Hi,

Can you post the link to your website please?

Regards,
Josue

May 4, 2016 at 9:34 am #626998

themeforesttony
Participant

Sorry for delay. I have just started dev on this so please forgive the mess.
See the header on the link below.
I have added a second header widget and you will see how it is overlapping the first.

May 4, 2016 at 10:12 am #627026
Josue
Inactive Moderator
Hey!

Try adding this code to the Quick CSS:
```
#text-5 {
    transform: translate(100%);
}
```
Cheers!
Josue
May 4, 2016 at 7:13 pm #627448

themeforesttony
Participant

Josue,
Thanks. Learned a CSS selector I did not know existed. I had to add !important but it did work.
However, when I re size display, the widgets shift and overlap each other. On a mobile screen for example they both completely overlap the logo.
Is there a way to contain them in their relative position so they just re scale?

May 4, 2016 at 9:23 pm #627508

Basilis
Inactive Moderator

Hi!

the space there is a bit limited.
Would it be ok, if we hide one of them on mobile? It can look a lot better

Best regards,
Basilis

May 4, 2016 at 9:38 pm #627517

themeforesttony
Participant

Sure. What would be the if statement to add?

May 5, 2016 at 12:49 pm #627761
Josue
Inactive Moderator
Something like this:
```
@media only screen and (max-width: 767px) {
    #text-5 {
       display: none;
    } 
}
```
May 5, 2016 at 7:36 pm #627959

themeforesttony
Participant

Josue,
That had an interesting result. I understand the code but the result was very weird. It pushed both widgets to the left of the screen and pushed the logo down even at higher widths above 767.
I am going to leave the CSS in place so you can see.
Let me know your thoughts.
Thanks again for your effort.

May 6, 2016 at 3:25 pm #628346
Josue
Inactive Moderator
You’re missing a }
```
@media only screen and (max-width: 767px) {
    #text-5 {
       display: none;
	} 
}
```
May 7, 2016 at 8:38 pm #628675

themeforesttony
Participant

Geez. Thanks.
Ok So that idea of hiding one as the screen width gets smaller, but still it leaves the visible one on top of the logo and menu when it gets to a mobile device size.
SO I can play with the where to hide and hide both of them, but is it possible instead to have them shift to be below the logo area as stacked elements when the width is 767?

May 10, 2016 at 9:17 am #629766

Andy
Inactive Moderator

Hi,

Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Though it sounds quite complicated what you want to do, but we will try it anyway.

Best regards,
Andy

May 10, 2016 at 8:24 pm #630219
themeforesttony
Participant
Here is a shot of what a sub-page looks like now:

Here is what looks like on a tablet or full screen:

Here is what it looks like on a mobile without hiding the widgets
http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-current.jpg:
The widgets get pushed over the logo area and the mobile menu

Here is what I would like it to look like on any screen < 1000px wide.
http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-desired.jpg

You can see the same kind of idea here:
https://www.gracechurch.org/ when you look at the site on a mobile device.

Hope that helps.
Thanks for even bothering to look at this. I do appreciate it.
- This reply was modified 8 years, 6 months ago by themeforesttony.
May 11, 2016 at 10:31 am #630562
Andy
Inactive Moderator
Hi,

thanks for the precise mockups and clarifications!

Use this code inside of Quick CSS field:
```
@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}
div#text-5 {
top: 83px !important;
left: 125px !important;
}
div#text-6 {
top: 207px !important;
left: -126px !important;
}}
```
And adjust the values as needed.

Best regards,
Andy
May 12, 2016 at 1:10 am #631052

themeforesttony
Participant

Andy,
That seems to do the trick of getting the widgets to move below the header and be stacked, but it is dropping them over the content below. In this case the full width slider.
Is there a way to have it remain in the logo area of the header so it forces the image to expand vertically and the widgets appear below the logo and above the full width slider?
Thanks again for your expertise in this.

May 12, 2016 at 12:44 pm #631303
Andy
Inactive Moderator
Hi,

add this code:
```
@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}}
```
Best regards,
Andy
May 12, 2016 at 7:49 pm #631561

themeforesttony
Participant

Hi Andy.
So it’s getting there. Here is a screenshot:

The text 5 widget appears below but a bit off center and the text 6 widget is below that but pushed off the screen to the left.
Thoughts?

May 15, 2016 at 10:34 am #632490

themeforesttony
Participant

Any thoughts?

May 16, 2016 at 4:35 am #632668
Ismael
Moderator
Hi,

Site looks fine on mobile except that the logo is being overlapped by the “cart” and “mobile menu” icon. Add this code:
```
@media only screen and (max-width: 767px) {
.responsive .logo img {
    max-height: 60px;
}
}
```
Screenshot:

View post on imgur.com

Best regards,
Ismael
May 16, 2016 at 8:02 pm #633235

themeforesttony
Participant

Hi Ishmael,
I am not sure why, but on my mobile, an Android (LG-G2 specific), I am still seeing the offset as shown here:

To be clear, I am still implementing both sets of code correct?

@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}}

and

@media only screen and (max-width: 767px) { .responsive .logo img {
max-height: 60px;
}}

May 16, 2016 at 9:40 pm #633302

Andy
Inactive Moderator

Hi,

it should work fine. Please clear browser cache on your device and refresh a few times. Check on another device as well.

Best regards,
Andy

May 17, 2016 at 12:11 am #633378

themeforesttony
Participant

Andy,
I am afraid I may have over-complicated the matter. When I stack all the CSS related to this I have the following:
@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}

div#text-5 {
top: 83px !important;
left: 125px !important;
}

div#text-6 {
top: 207px !important;
left: -126px !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo img {
max-height: 60px;
}
}

#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

#header .widget {
margin-top:20px!important;
color:#ffffff!important;
}

Together it does not display correctly. Is there something in all this that I should have removed or modified?

May 17, 2016 at 10:55 am #633615
Andy
Inactive Moderator
Hi,

please always add screenshots to show us what the code does with your website.
Do you want to change mobile behavior? or are you referring to desktop now?

Change this code inside media queries:
```
div#text-6 {
left: -126px !important;
}
```
to this:
```
div#text-6 {
left: 105px !important;
}
```
And in general: play around with different values inside the codes you are using, until you find what fits to you.

Best regards,
Andy
May 17, 2016 at 8:00 pm #633933

themeforesttony
Participant

Andy,
Thanks. SO the div#text-6 and -5 appear to ffect position of widget on mobile or media screens.
I got that position worked out.
The desktop and tablet (screens wider than 767px, the widgets are both overlapping each other again.
I have played with the following code:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}

#text-6 {
transform: translate(100%);
}

which I though was for positioning of widgets on desktop-type display, but there are not moving.
Here is a screenshot:

May 18, 2016 at 1:47 pm #634433
Andy
Inactive Moderator
Hi,

as already said you need to play around with the different values to search the right positioning.
Try this:
```
#text-6 {
left: 85% !important;
}
#text-5 {
left: 65% !important;
}
```
Best regards,
Andy
May 18, 2016 at 9:46 pm #634793

themeforesttony
Participant

Andy,
Thanks.
Somehow those two callouts got lost in all the back and forth. That worked a charm.
Thank you for hanging in there.

May 19, 2016 at 2:08 pm #635184

Andy
Inactive Moderator

Hi,

glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Best regards,
Andy
Author

Posts