wordpress footer problem (can't add search button properly)

[Bones_Jones]

hi guys,

link
http://goo.gl/g7CGCT

i’m trying to add a same ‘search button'(located top right header) at the bottom of footer.

but when i add the code at the footer area, it looks all screwy. i want it to look exactly like that (width 320px) with border…

what am i doing wrong? thx in advance!!

[ClintonLee83]

Go to your footer to where you put your custom code and find the

id="search-3"

replace that id with

id="search-4"

next, go to your style.css and go down to line #14

push enter, once to make an extra line and paste this code:

#footer .searchform{
    float:left;margin:12px 0 0;
    width:100%;max-width:316px;
    border:2px solid #f6861f;
    height:28px;background:#fff}

#footer input[type="submit"]{
    width:25%;
    float:right;
    border:0;
    height:100%;
    padding:1% 0;
    margin-left:-5%
    }

#footer .searchform:hover {
    border:2px solid #ef4036;
    }

#footer .searchform:hover input[type="submit"]{
    background:#ef4036;
    }

#search-4 {
    float:right;
    width: 320px;
    }

Next, you need to make the white footer background taller so it extends to the bottom of the screen. You’ll need to find your footer id tag in the css. So while you’re in your style.css sheet, use your search function ctrl+f (command+f if you’re on a mac) and search for this:

#footer {

if you look to the right of your footer ID tag, you’ll see the height attribute which is set at 65px – Make it 120px instead and walla, it should look great.

[ClintonLee83]

Yes, you need to clear your browser cache.

you can do that usually by clearing your history, make sure the “cache” box is checked. In some browsers like Chrome, you can do shift+refresh as a shortcut.

If you can’t find it in your browser, google it.

Your browser downloads and stores your website information so when you revisit a website, it loads faster. When you clear out your browser cache, it deletes and re-downloads all that information so that you can see fresh changes.

From here, my inspector sees a cleaner style sheet without any data on line 13, it looks much better.

[ClintonLee83]

Sure, I’m glad I could help solve it :)

Try using a different browser. If it works, you’ll know it’s chromes cache.

[ClintonLee83]

Hey Jones, Can you put the original search bar at the top of the page? I’d like to look at the original code from the working bar so we can compare.

[ClintonLee83]

Can you restore your site from a backup to before November 13th?

[ClintonLee83]

Ok good. Now scroll down to the bottom of your style.css and paste the css I gave you in my first post.

Are you doing backups of your site? You should store a copy of your site on your computer before you start playing with the code.

[ClintonLee83]

Jones, I didn’t consider your responsive css.

You need to put this css before your media queries, so paste the code from my original post on line 2871 – just before your responsive css.

You’ll need to adjust your media query css in order for the search bar and footer to respond when you shrink and expand the browser.

Do you know how to do that?

[ClintonLee83]

did you save the css to line 2871 of the style.css? And did you save and upload the changes? My inspector is showing nothing on line 2871

[ClintonLee83]

Yes, that’s correct, you should paste the css code from my original post here directly above that line.

Do you want me to go into your wordpress dashboard and take a look?

[ClintonLee83]

We’re working on your eleven40 style.css

[ClintonLee83]

[email protected]

[ClintonLee83]

There you go, it’s working now. I made the search bar responsive using media queries, if you make the browser narrow, you’ll see the site design changes.

If you want the search bar to display at the top of the page, go into your style.css and go to line 1494 and delete the:

display:none;

from the #header .searchform {

[ClintonLee83]

how are you doing it? it looks like it’s interfering with the search bar

[ClintonLee83]

Ah, it looks great :)

[Author]

Posts