ワードプレスサイトの右サイドバー上の検索ボックスが移動しない

Question

###前提・実現したいこと
ワードプレスサイトの右サイドバーの上にある検索ボックスをスライドショー右上に移動したい。

###該当のソースコード
↓以下、style.cssから抜粋
/* Search Widget */
.widget_search input.s {
width: 100%;
height: 40px;
padding: 0 35px 0 15px;
color: #777;
background-color: #f9f9f9;
background-image: none;
background-position: right 10px;
border-color: #eaeaea;
cursor: text;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
text-indent: 0;
}

###試したこと
style.cssの検索ボックスの定義と思われる箇所で
postion:、top:、right:を定義してみたのですが、動いてくれません。

###補足情報(言語/FW/ツール等のバージョンなど)
▼ ワードプレス
WordPress 4.6.1
▼ 使用してるテーマ
Travelify バージョン 3.0.2
▼ 使用してるプラグイン
Advanced Custom Fields バージョン 4.4.8
All In One SEO Pack バージョン 2.3.9.1
BackWPup バージョン 3.3.4
Contact Form 7 バージョン 4.5
EWWW Image Optimizer バージョン 2.9.8
Instagram Feed バージョン 1.4.7
Lazy Load バージョン 0.6.1
Newpost Catch バージョン 1.3.1
Per page head バージョン 1.3
PubSubHubbub バージョン 1.7.2
WP Edit バージョン 4.0
WP Multibyte Patch バージョン 2.7
WP-Optimize バージョン 1.9.1

Comments

[pond]

ご指摘ありがとうございます。内容を修正いたしました。

Answer 1

右サイドからヘッダーへの移動はhtml構造を変えた方がいいです。

ウィジェットの変更程度でいけるなら簡単ですが、そういうものが一切ない場合はテンプレートなどを自分でカスタマイズですね。
まあ、該当箇所が#search-2なので#search-1がいそうなことは想像つくかと思いますが…
#search-1がいてもヘッダー部分とは限りませんが。

カスタマイズが難しければデザインにあったテーマを探しなおす方がいいかもです。
一番は勉強してカスタマイズできるようになることです。

一応cssで無理矢理持ってくることはできるようですが、融通が利かないのでおすすめしません。

.wrapper {
    position: relative;
}
#search-2 {
    position: absolute;
    padding: 0;
    top: 90px;
    right: 27px;
}

Comments

[pond]

ありがとうございました。.widget_searchのみで#search-1、#search-2はありませんでした。もう少し、ソースを調べてみたいと思います。

[gin]

#search-2は.widget_searchについてるidです。
別のidが付いてるならそれに変えてください。
でも別のidが付いてるならますますおすすめできないですね…
-------
<aside id="search-2" class="widget widget_search">
<form action="https://colorlib.com/travelify/" class="searchform clearfix" method="get">
<label class="assistive-text" for="s">Search</label>
<input type="text" placeholder="Search" class="s field" name="s">
</form>
</aside>
-------
生成されたhtmlソースで確認してみてください。

[pond]

ご教示頂きありがとうございました。htmlソースを確認したところidは、#search-2になっており、移動できました。