Question

I’m having a few alignment issues with Tumblr.

I’m trying to align a header and search icon.

The site is here.

Below is a mockup I want to achieve:

If you look at my site you’ll see the header and search bar aren’t aligned as per my image above.

I’ve tried different margins etc but to no avail.

Oh, I want it to respond to the browser so it’s always aligned.

Answer 1

Find the below css rules and paste the css rules there

css: http://wearethejamaicanbobsledteam.tumblr.com/ line: 555

 iframe#tumblr_controls {
        position: fixed !important;
        right: -310px !important; // it will move the button to -310px towards right.
        top: 9px !important;
        width: 160px;
        z-index: 5000 !important;
    }

To align search box:

css: http://wearethejamaicanbobsledteam.tumblr.com/ line: 150

#search {
    border-left: 0 solid #DDDDDD;
    border-right: 0 solid #DDDDDD;
    padding: 20px 15px 6px;
    position: absolute;
    right: 32px; // change the value here
    top: 0;
}

To make the Lens icon to from left to right in search box

css: http://wearethejamaicanbobsledteam.tumblr.com/ line: 161

#search input[type="text"] {
    background: url("http://static.tumblr.com/twte3d7/V9ym4qy8v/search-white.png") no-repeat scroll 95% 6px #FCFCFC;
    border: 1px solid #DDDDDD;
    border-radius: 0 0 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    color: #212121;
    font: 12px 'Karla';
    padding: 6px 15px 7px 35px; **// Update the below rules here**
    transition: all 0.7s ease 0s;
    width: 150px;
}

Update the css in above css rules

padding: 6px 35px 7px 15px;