Global Header CSS Help

Developer Support CMS Development
1

Looking to place two images/logos on the same line in the global header.

Not sure how to effectively edit this to have both shows.

The below is what I have this far. It’s, obviously, not the correct end product.

Any help is welcome.

<!--
templateType: global_partial
label: Page Header
-->
<header class=“custom-header lp”>
<div class=“header-group”>
<div class=“header__container”>
<div class=“header__logo”>
<div class=“logo-inner”>
<span class=“image-frame”>
{% module “header_logo” path=“@hubspot/logo”, label=“Header Logo”, link=“https://actstageenv.wpengine.com/“,img={src=”{{ get_asset_url(‘../../images/Untitled-design-17-1.png’) }}”, width= 1000, override_inherited_src=true, alt= {{ “act research logo” }}} %}
</span>
</div>
</div>
<div class=“header-group”>
<div class=“header__container”>
<div class=“image-frame”>
<span class=“image-frame”>
{% module “image-frame” path=“@hubspot/logo”, label=“Header Logo”, link=“https://f.hubspotusercontent30.net/hubfs/5479836/Logo%20and%20Branding-07.png/“,img={src=”{{ get_asset_url(‘../../images/Untitled-design-17-1.png’) }}”, width= 1000, override_inherited_src=true, alt= {{ “act research logo” }}} %}
</div>
</div>
</div>
</div>
</div>
</header>

2

Hello @IMcGriff

Do you have any more details that you could show us? Maybe a mock of what you are going for? Also, if you have a link to a demo page that has the on it, that would also be helpful.

@stefen , @jonchim might be able to help :grinning_face:

3

@IMcGriff one way to do it is to use flexbox on the parent div so something like this:

.custom-header { display: flex; align-items: center; }

4

@stefen too quick!