【WordPress】Lightning：ヘッダー右上に電話番号や画像を設置

①まず「functions.php」に下記を追記

/* ヘッダー右上に表示 */
function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<img src="http://xxx.jpg">
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

②次にCSSを設定

/* ヘッダー右のブロック */
.logo-after {
    display: block;
    width: 200px;
    float: right;
}
 
.logo-after img {
    max-height: 60px;
}
 
/* ヘッダー幅100% */
.navbar-header {
    width: 100%;
}
 
@media (max-width: 991px) {
    .logo-after {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
}
 
/* verにより追記 */
@media (min-width: 1200px) {
    .gMenu_outer,
    .gMenu,
    .gMenu > li {
        width: 100%;
    }
}
 
@media (max-width: 1199.98px) {
    .siteHeader_logo {
        width: unset;
    }
}