CODEWITHSUNDEEP
wordpresscsscss-transitions
beta
beta

Reputation: 5696

Change direction of css width transition

I have a WordPress page with the twentythirteen theme. E.g.: https://twentythirteendemo.wordpress.com/

The last element of the navigation bar is the search form. If I click on the search form, a CSS transition is initiated which fades to the left, finally showing the whole search form.

I would like to place the magnifier-icon more on the left (this is easy: just changing the right css-property) and change the direction of the transition. The transition should go from left to right (not from right to left as is now).

Thanks for your help.

Upvotes: 0

Views: 395

Answers (2)

AndrewP
AndrewP

Reputation: 26

If you set the label on position: absolute; left: 0; the input will open to the right.

edit:

positioning an element to the right sets the alignment of the element to the right side. as text-align works on inlined elements, right and left works on absolute-positioned elements.

so, if you want to achieve a growth to the right, align the element to the left.

Upvotes: 1

beta
beta

Reputation: 5696

The solution is to change the right property in the following CSS to left:

.site-header .search-form {
    position: absolute;
    right: 200px;
    top: 1px;
}

Then the transition will be from left-to-right. Of course, the px need to be adapted accordingly.

Upvotes: 0

Related Questions