CMS Development

IMcGriff
Membre

Global Header CSS Help

Résolue

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>

0 Votes
1 Solution acceptée
stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Global Header CSS Help

Résolue

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

 

Stefen Phelps, Community Champion, Kelp Web Developer

Voir la solution dans l'envoi d'origine

3 Réponses
jonchim
Guide | Partenaire solutions Diamond
Guide | Partenaire solutions Diamond

Global Header CSS Help

Résolue

@stefen too quick!






Jon Chim
VP of Design & Development
Hypha HubSpot Development


check Did my post help answer your query? Help the Community by marking it as a solution
stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Global Header CSS Help

Résolue

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

 

Stefen Phelps, Community Champion, Kelp Web Developer
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

Global Header CSS Help

Résolue

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 😀


HubSpot’s AI-powered customer agent resolves up to 50% of customer queries instantly, with some customers reaching up to 90% resolution rates.
Learn More.

0 Votes