WordPress.org

Ready to get started?Download WordPress

Forums

Pinboard
[resolved] Placing search bar on top of header image (13 posts)

  1. paul.a.cunn
    Member
    Posted 1 year ago #

    Hi all,

    I was wondering if there is a way to make the search bar and other icons appear on top of the header image. Currently I have them not displaying because when I display them they jump to a new line and make white space under my header image. I have tried making my image the header background however for some reason Chrome, IE, and Mozilla render the header different sizes which makes my image either to big to be fully seen or not really as big as I want it. Mozilla seems to do the best job. So I guess that leaves two options.

    1) Make the search bar and other goodies appear on top of the header image.
    2) Make it so each browser renders the image correctly.

    If anyone has any ideas I am all eyes I guess in this case since I am reading.

    Thanks for the help, here is a link to my site just in case you need it.

    http://www.natalieturgeonband.com

  2. paul.a.cunn
    Member
    Posted 1 year ago #

    Got it!

  3. wrightequine
    Member
    Posted 1 year ago #

    Can you tell me how you did it?

  4. paul.a.cunn
    Member
    Posted 1 year ago #

    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,

  5. wrightequine
    Member
    Posted 1 year ago #

    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.

  6. wrightequine
    Member
    Posted 1 year ago #

    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!

  7. paul.a.cunn
    Member
    Posted 1 year ago #

    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.

  8. paul.a.cunn
    Member
    Posted 1 year ago #

    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!

  9. wrightequine
    Member
    Posted 1 year ago #

    I'll give that all a try! Thanks so much for your help!

  10. wrightequine
    Member
    Posted 1 year ago #

    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.

  11. paul.a.cunn
    Member
    Posted 1 year ago #

    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!

  12. wrightequine
    Member
    Posted 1 year ago #

    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.

  13. paul.a.cunn
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.