Adding a new div area above custom header

[LeaChristine]

Hi, I am trying to get my header to look like this:

http://www.lcsadventuresinlibraryland.com/wp-content/uploads/2014/07/Design-example.png

With the social media buttons being individual images that link.

And this is as far as I've been able to get:

http://www.lcsadventuresinlibraryland.com/

Right now, I have the entire image just cut into two pieces-- the bottom part is the main header that I have in my stylesheet like so:

.site-header {
background: url(http://www.lcsadventuresinlibraryland.com/wp-content/uploads/2014/07/HEADER-TEST.png) center top no-repeat;
float: center;
height: auto;
width: 100%;
margin-top: 25px;
}

And the top part (which is a cut-off of the top of the header with the social media), I created a function for in my functions.php:

//* Add function for social media
function lea_social_media() {
?><div class="social-media">

</div>
<?php

}
add_action( 'genesis_header', 'lea_social_media', 5);

However, when I go back to my stylesheet to style the .social-media div, nothing is happening:

/* Social Media Div
---------------------------------------------- */
.social-media {
width: 100%;
height: auto;
float: center;
}

Can someone please help me with styling this .social-media div and/or the main header image so that they are seamlessly connected and both still flexible for when I reduce the browser screen? Any advice is appreciated! 🙂

http://www.lcsadventuresinlibraryland.com/

[Brad Dalton]

You can add a new div which is easy but not sure this is what you want?

Looks like you want positioning in your header?

---

Tutorials for StudioPress Themes.

[waqas97]

Adding Div is not a difficult task at but question is what you want to add in header?
Can you mentioned what you wanna to add in this div?
Look http://www.latesttutorial.com/ , today i added new menus over existing menus and i did in header file by adding new div.

Regard
WAQAS

---

Latest Tutorial

[LeaChristine]

Hi, thanks for the reply-- and yes, I have added the new div above the header area with this code (repasting it without the image src because for some reason it just showed the image in the above message):

//* Add function for social media
function lea_social_media() {
?><div class="social-media">

</div>
<?php

}
add_action( 'genesis_header', 'lea_social_media', 5);

So it is showing on my site, but in my stylesheet I am not able to position or otherwise style the new social-media div in order to align with my header. Code I have tried is above. I'm not sure why it isn't working? Is it because I have html code for the div in a php file so the stylesheet isn't reading it? I'm fairly new to using php so I'm not completely sure what's allowed and what isn't!

So to answer, I've added the new div but I'm unable to style it. Any help would be great!

[LeaChristine]

UPDATE- I figured it out! 🙂

I had to link the stylesheet at the beginning of my functions.php file and now it is working. Thank you though!

[Davidemark3]

I think am having same problem with my. http://www.geekinfoloaded.com

[Author]

Posts