Topbar layout

[phil2]

phil2

June 28, 2019 at 7:00 pm

Hi Team,

A site I am replacing has this in the Virtue topbar (see screenshot).

On mobile, it behaves nicely and remains in one row as long as it can:

I previously achieved this by modifying header-topbar.php but would like to try and do it properly.
Modification to em>header-topbar.php looked like this:
<div class="col-md-6 topbar-left">
<span style="float:left;">
<h5>Phone: 0800-399-674</h5>
</span>
</div>
<div class="col-md-6 topbar-right">
<span style="float:right;">
<div id="topbar-search" class="topbar-widget">
<?php if(kadence_display_topbar_widget()) { if(is_active_sidebar('topbarright')) { dynamic_sidebar('topbarright'); } }
else { if(kadence_display_top_search()) {get_search_form();} } ?>
</div>
</span>
</div>

Additions in style.css look like this:
/* TOPBAR */
/* Make sticky */
#topbar {
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.admin-bar #topbar {top:32px;} /* was 28px. Increased 31/7/18 */
/* Styling */
#topbar h5, #topbar a {color:#fff;}
/* #topbar a:hover {color:#edcda1;}*/
.headerclass {margin-top: 44px;} /* was 30px. Increased 31/7/18 */
.topbar-right {padding-right:0px;}
/* Increase size of search box */
#topbar-search form {margin:2px 0px;}
#topbar-search input[type="text"] {height:40px;font-size:18px;}
#topbar-search .search-icon {height:40px;width:40px;font-size:18px;}

@media (max-width: 462px){
#topbar .topbar-right > span {float: left !important;}
}

Please could you advise how to go about this without modifying template files?
Thanks,
Phil.