Community Forums › Forums › Archived Forums › Design Tips and Tricks › Lifestyle Pro Header Layout with header widget
Tagged: header, lifestyle Pro
- This topic has 17 replies, 3 voices, and was last updated 9 years, 9 months ago by mfd.
-
AuthorPosts
-
June 30, 2014 at 11:38 am #112122mfdMember
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/June 30, 2014 at 1:44 pm #112154AnitaKeymasterCan you turn the site on so we can take a look?
Love coffee, chocolate and my Bella!
June 30, 2014 at 1:53 pm #112156mfdMemberSorry...forgot about that! It's live nowl
June 30, 2014 at 2:01 pm #112159AnitaKeymasterHave you tried using the Header Right Widget area to add the icons?
Love coffee, chocolate and my Bella!
June 30, 2014 at 2:01 pm #112160AnitaKeymasterCan you put it in place on the site?
Love coffee, chocolate and my Bella!
June 30, 2014 at 2:11 pm #112163mfdMemberI 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!
June 30, 2014 at 2:12 pm #112164TonyaMemberWhat 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 BootcampJune 30, 2014 at 2:27 pm #112169mfdMemberTonya-
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?
June 30, 2014 at 2:35 pm #112176TonyaMemberDid 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 BootcampJune 30, 2014 at 2:37 pm #112177AnitaKeymasterI 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; }
Love coffee, chocolate and my Bella!
June 30, 2014 at 2:38 pm #112178AnitaKeymasterJune 30, 2014 at 2:50 pm #112184mfdMemberThanks 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...?
June 30, 2014 at 3:06 pm #112192AnitaKeymasterDid you happen to try my suggestion? It worked fine for me.
Love coffee, chocolate and my Bella!
June 30, 2014 at 3:09 pm #112196TonyaMemberYou'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 BootcampJune 30, 2014 at 3:14 pm #112197AnitaKeymasterI'll unsubscribe since you have this handled.
Love coffee, chocolate and my Bella!
June 30, 2014 at 3:15 pm #112198TonyaMemberSounds 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 BootcampJune 30, 2014 at 3:52 pm #112209TonyaMemberSorry 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 BootcampJuly 1, 2014 at 6:36 am #112389mfdMemberTonya- This worked perfectly!! I appreciate all your help! I'm thrilled! Thanks so much.
-
AuthorPosts
- The topic ‘Lifestyle Pro Header Layout with header widget’ is closed to new replies.