サイトタイトル下のキャッチフレーズを移動させたい

最も簡単なのは、

#site-title,
#site-description {
  display: inline-block;
}

を追加することかと思います。今時はdisplay: flex;でやりますが、どのような目的があるかで変わります。
他にも色々方法はあります。
ただロゴ画像を使われているということなので上記でできるかは不明と位置揃えの問題があります。

サイトのアドレスを公開してもらって、どのように並べたいか(位置揃え)、仮にスマホで表示した時キャッチフレーズに折り返しが発生した場合どうするか等の仕様がわかると尚良いです。

基本的に、ロゴ画像がimgタグで入っている場合imgはインライン要素ですが、そのまま並べると隙間ができるのでブロック要素に変換してあるかと思います。ブロック要素を横に並べるためには、再度inline-blockを指定するか、floatで左寄せにするか、flexで並べるか、親要素をposition: relativeにして、中身をabsoluteで絶対配置にするなどができます。

いずれも横並びにできますが、折り返しが発生してはマズイ場合、それをどう回避するか等によって方法を変える必要があります。

ありがとうございます！
inline-blockで横並びになりました
スマホではキャッチフレーズは非表示にしています

現状で十分に満足ですが
例えば
画像の下端揃えにあるキャッチフレーズを
上端揃え、中央揃えにすることも可能でしょうか？

> 上端揃え、中央揃えにすることも可能でしょうか？

できますよ。
サンプルも作れますが、そのためには今どのような状態になっているかがわからないと正しいサンプルはできません。アドレスを公開してくださいとはそういうことです。
コメント欄上に、

※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。

こうあるのは、質問するまでにどんなカスタマイズがされているのかわからないのと、どんな状況になっているかわからないからです。

Simplicity公式の表示がほぼデフォルトなのでデフォルトで使われている方は公式の出力を元にサンプルを作りますが、それ以外は設定を変えたり画像を用意したりが面倒なので質問者のサイトなりそうなっているサイトなりを参考にサンプルを作ります。

自力でされるなら、line-heightで揃えるか、親要素をdisplay: flexにしてalign-items: centerとするだけで中央になります。もちろん上揃えも下揃えもできます。
transformで動かすこともできますし、なんとでもできるんですが、どのようになっててほしいかという完成形の仕様、つまりPCの時は中央揃えでとか、スマホの時はロゴの下に持ってくるとかそういう仕様が必要です。

Hidekichi 師匠

アドバイスありがとうございます
display: flex　でなんとかできました

たぶん大丈夫と思いますが

.top-title-catchphrase {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  align-items: center;
} 
.top-title-catchphrase #site-title {
  margin: 0px;
}
.top-title-catchphrase #site-description {
  padding: 5px;
  margin: 0px;
}

僕ならこんな感じにします。
サンプル: タイトル周りをflexで | codepen

#headerあたりだけレスポンシブにしてあります。scssで書いてます。css欄の下向き三角のview compiledボタンでcssを確認してみてください。

まずべんだーぷれふぃっくすが足りないのではなかろうかというのが1点。サンプルではタイトルが「Simplicity」なので、頭のS,とl以外は縦真ん中に水平線(ミーンライン)を入れたとして、キャッチフレーズ部が14pxの場合、ちょっと本来のセンターよりも上に見えてしまいます。なので16pxにしてあります。
もし14pxでいくのであれば、align-itemsはcenterより、baselineの方が美しいかも知れません。

また48em(768px)でメディアクエリが効くようにしてありますが、デフォルトの状態でもう少し縮めれば折り返しが発生します。その際に、#site-descriptionにpaddingを仕込むと左側が揃いません。それが狙いならそのままでも良いですが僕は左に揃えるようにしました。
#site-titleの方にmarginを仕込み、.top-title-catchphrase自体にpaddingを仕込みます。こうするだけで左が揃います。

#site-titleのボトムが#site-descriptionの折り返し発生時にくっつきすぎると(line-height:1でくっつくようにはしたのですが)アレなので、#site-titleにmarginでpadding分と同じだけ隙間を作っています。
.top-title-catchphrase自体にpaddingを仕込む理由としては、上下に5pxの隙間を作りたいだけで、左右は特に必要ないですが書くのが面倒なのでpadding: 5pxとしています。

僕個人の考えですが、例えばヘッダに背景画像を入れないとすれば大きなスペースは不要ではないかと思います。そこで以前作った未完成のサンプルですが、

サンプル: fixedさせた小さなヘッダをクリックするとメニュー表示 | codepen

こんな感じでもよいのではなかろうかと思ったりも。

さすが、師匠
次元が違います

「べんだーぷれふぃっくす」は
後日、調べてみます

「fixedさせた小さなヘッダ･･･」カッコイイですね
実は今回、ヘッダーを最小限（ロゴ画像高さ45px）にするのが目的です
（ロゴ画像の下になぜか空きが出てしまいましたが･･）
キャッチフレーズの文言はタイトルに変えてます
「ロゴ」「タイトル」できればその横にメニューを表示したいのですが
クリックでメニュー表示はなるほど
でも気づいてもらえなさそうで･･･

ヘッダーの固定は実現させたいので
後日じっくりと解読させていただきます

ありがとうございました