Global Header CSS Help

IMcGriff — Mon, 26 Apr 2021 13:46:34 GMT

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.

<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>

Re: Global Header CSS Help

dennisedson — Mon, 26 Apr 2021 19:40:18 GMT

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 😀

Re: Global Header CSS Help

stefen — Mon, 26 Apr 2021 19:47:26 GMT

@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; }

Re: Global Header CSS Help

jonchim — Mon, 26 Apr 2021 20:43:23 GMT

@stefen too quick!

topic Re: Global Header CSS Help in CMS Development

Global Header CSS Help

Re: Global Header CSS Help

Re: Global Header CSS Help

Re: Global Header CSS Help