Grow your CSS skills. Land your dream job.

Inserting Search box into header image

  • # April 3, 2013 at 3:43 pm

    I am looking to insert/move my search bar into my header image. (kinda similar to what http://www.bing.com/ does) I am looking to do this purely with CSS. It is a Squarespace 6 template and I have limited access to the sites Html.

    Thanks for your time. Here is the link to my website http://www.jobspark.ca/

    # April 3, 2013 at 4:17 pm

    if you don’t have access to the html, you can absolutely position that search box up the page a bit with a negative value, but do this with caution.

    # April 3, 2013 at 5:42 pm

    i think some jQuery could work. http://codepen.io/jmacaluso711/pen/EleJu

    $(document).ready(function(){
    $('#header').append($('.search'));
    });
    # April 3, 2013 at 6:02 pm

    and i just noticed you said you wanted to do it purely with css… my bad

    # April 3, 2013 at 6:13 pm

    If you can’t change the html you can do some ugly absolute positioning with some negative top.

    # April 4, 2013 at 4:45 pm

    @mattrossi @CrocoDillon @jmacaluso I found a spot that I can insert some html into my header. Does this help things ?

    # April 26, 2013 at 2:55 pm

    Um, it may or may not. You need to move that form, so if you have access to the markup / code for the form, you can maybe move it up into the header?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".