Lifestyle Pro Header Layout with header widget

[mfd]

Using the Lifestyle Pro theme, I am currently working on the header on this site.

I have made it so the header fills the entire page area. I would like to had social media icons to the upper right hand corner of the header area using the header widget.

In the old Lifestyle theme, before it was mobile, I could lay the icons on top of the header area using position. I have found that I can this in the mobile version because it messes up the look in mobile view.

Is there a way to be able to place the icons in the header area on this particular site?

http://momstogetherblog.com/

[AnitaC]

Can you turn the site on so we can take a look?

---

Need help with customization or troubleshooting? Reach out to me.

[mfd]

Sorry...forgot about that! It's live nowl

[AnitaC]

Have you tried using the Header Right Widget area to add the icons?

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Can you put it in place on the site?

---

Need help with customization or troubleshooting? Reach out to me.

[mfd]

I just popped the icons back in the widget in the header...I didn't readjust the width of the header or make it transparent so you can see the full header image behind. But you should get the idea. Thanks for your help!

[Tonya]

What I typically do for these is modify the following with the functions.php file:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'width'           => 1090,
	'height'          => 70,
	'header-selector' => '.site-header',
	'header-text'     => false,
));

What this does is to attach the header image to the <header> element vs the logo area.

You'll want to return the .site-title and .site-title a styling back to what it was previously though.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

Tonya-
I added your code to the functions.php and then double checked the .site-title and .site-title a styling to make sure it stayed the same as the original theme styling.

Nothing appears to have changed after adding the code mentioned above. Any insight?

[Tonya]

Did you "add the code" or "modify it"? If added, you actually need to modify the existing code.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[AnitaC]

I changed the width on this:

.title-area {
    float: left;
    width: 1090px;
}

Then added a top-margin here:

.site-header .widget-area {
    color: transparent;
    float: right;
    margin-top: -230px;
    width: 298px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

It looks like this: http://awesomescreenshot.com/08d32j8e2b

---

Need help with customization or troubleshooting? Reach out to me.

[mfd]

Thanks Tonya- I now modified the existing code and got the icons in the header area...the only issue left, is that now on mobile, the existing header does not shrink down to fit the mobile view...?

[AnitaC]

Did you happen to try my suggestion? It worked fine for me.

---

Need help with customization or troubleshooting? Reach out to me.

[Tonya]

You're welcome.

Let me take a look at the mobile. We need to apply another css for the background image to "contain" it; however, I'll need to see where to filter the css that is outputted from the core. I'll get back with you shortly.

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[AnitaC]

I'll unsubscribe since you have this handled.

---

Need help with customization or troubleshooting? Reach out to me.

[Tonya]

Sounds good, Anita! 🙂

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[Tonya]

Sorry for the delay. Busy day.

Since there's so much code, I created a gist. Go to click here to see the code. These changes apply to your functions.php file.

You can to do the following:
Here is what you want to do within your functions.php file:

1. Find the add_theme_support( 'custom-header', array( line within your functions.php file. Then add the callback as shown:
'wp-head-callback' => 'lunarwp_modify_custom_header', // callback so we can modify the css added to the <head>

2. Then just below this (or at the end of the file if you wish), add the function lunarwp_modify_custom_header. Just copy and paste it.

3. Then save the file.

Now once you get this in there, we are going to have to adjust the heights of title area. So at the end of your style.css file where the @media queries are, you need to adjust the .header-image .site a min-height for each of these.

Cheers, Tonya

---

Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp

[mfd]

Tonya- This worked perfectly!! I appreciate all your help! I'm thrilled! Thanks so much.

[Author]

Posts