Can you tell me how you did it?
Its very dependent on your website and there are several different ways it can be done. Can you send me a link to your site so I can recommend the best option for you?
Cheers,
Still developing using mamp – not sure if you can get to it since its local. http://localhost:8888/reinsman/ (I’m not really sure about how that works.)
This is my first go at this – but I’ve got a black based background header and I can’t get the Social Icons or the header to show up over the header when I make it full width. They cram in the side and it adds a weird margin.
Still developing using mamp – not sure if you can get to it since its local. http://localhost:8888/reinsman/ (I’m not really sure about how that works.)
This is my first go at this – but I’ve got a black based background header and I can’t get the Social Icons or the header to show up over the header when I make it full width. They cram in the side and it adds a weird margin.
Basically – I’m trying to do exactly what you did with your website – I found it searching for a solution to the same things!
Okay so if you haven’t made a child theme, make one. Then activate Jet Pack if you haven’t. Then don’t make your header full length, instead change your background color of your header to black, if that’s what you want, by pasting the following into your custom css for your child theme.
#header {
background: #000000;
}
Then add the following to your css which will make the search bar and all the social media icons appear on the right of your screen. The margin-top: 0; part makes it so it appears as high as possible.
}
#header input#s {
float: right;
}
#social-media-icons {
float: right;
margin-top: 0;
}
Try that and see if it helps. If anything weird is happening let me know and I will try to help. There is also another way to do this if you need your header to be the full width of the page so let me know if that is absolutely necessary.
You’ll need this as well.
#header #searchform {
float: none;
}
By the way I can’t see your site on a local server. So this is mostly just guess work. There may be a better way to do this but without seeing your site this is the most generic way I can suggest
Cheers!
I’ll give that all a try! Thanks so much for your help!
Okay – but the Social Icons are invisible until you mouse over them. That’s my issue now.
Our header was full size to match our E-Commerce Site (shop.reinsman.com) but if it is that complicated I can change the graphics.
The social icons are not invisible they are actually transparent. In fact there are two parts to these images they have a transparent part and a colored part. There is an animation that makes it scroll upwards from the transparent part to the colored part. The black is too dark for you to see the transparent part which is why you are seeing them only when you hover over them.
This is also an issue I ran into. The way I handled it was to grab the image from my site and then use an image editor such as photo shop and actually remake the part of the image that is transparent. You can see I still have to do this with the youtube icon. When you create the new image you can paste the following into your custom css. This is only for the facebook and twitter images obviously but you get the idea.
.facebook {
background-image: url(get this from your media library);
}
.twitter {
background-image: url(get this from your media library);
}
With a black background there is no other way that I know of to make the icons appear. You can either change the images or change the background color. I choose to change the images because it wasn’t very difficult to do. Hope this helps.
Cheers!
Thanks! I did some quick photoshop and now the transparent is the same as the bottom colors!
The only thing holidng me up now is centering my header image. It looks a little weird set from the left.
So this one took me a little while to figure out so I should get at least like some cookies or something. Here is my suggestion for you, just put the following in your css style sheet. The vertical align you don’t really need since it is already set like that in the normal css but the margin left will allow you to move the header image to be where ever you would like. Even if you push it all the way to the right it will still appear underneath your social media icons, which is cool! Change the % to whatever you want or whatever works for your site. You can also use pixels if that is better.
#site-title img {
vertical-align: middle;
margin-left: 50%;
}
Let me know if this works for you,
Cheers!
