[Support request] Header with image & formatted text

[Roger]

Using GPP, what is the preferred way to create a Header that contains an image to the left and formatted text to the right? In essence, it would look similar to a 2 column table with 1 row that would be responsive from the desktop to portrait on the phone.

From what I can see, the “Customize > Layout > Header” does not support the above strategy. I tried an image on the left & a single line of text to the right of the image, yet I don’t see how to expand it to create what I need.

I started looking at the Elements, but haven’t figured out how to use this to replace the simple Header described earlier. I’m not even sure that this is the right place to be.

I’ve included a URL below that illustrates what I’m talking about. This is a site that was initially designed many yrs ago. The logo is on the left & there is a widget for the formatted text on the right. As you shrink the browser width you will see how it responds responsively. Notice that the right hand text is formatted under the logo when the browser width gets narrow enough.

Your guidance would be appreciated.

[David]

Hi there,

You can add a HTML Widget for your text to the Customizer > Layout > Widgets > Header Widget.
Will take a little CSS to reverse the stacking order on mobile. If you want to try setting it up and share a link we can assist with the CSS

[Roger]

Hi David,
When I try to follow your suggestion I get only this far…
Customizing > Layout
and don’t see any “Widgets” choice. What am I missing???

I surprised you don’t have a simple way of setting up a header similar to what I showed in the example.
— Thanks

[Leo]

I think David meant to say Customizer > Widgets > Header 🙂

Should be pretty simple once you’ve added it in.

[Roger]

Ok, I finally figured out how to specify HTML for the Header, but now I’m having trouble writing the correct HTML code. I was trying to add an image here that could be used to illustrate what I’m trying to do, but that doesn’t seem possible. Therefore I have added a link to another client site that was initially created many yrs ago & still undergoing refinements.

Take a look at the header. On the left you will see the logo which is 310×144. This is “header-left”. Then I have “header-right” that contains formatted text. If you reduce the width of the browser window, you will eventually see that the “header-right” text is reformatted & placed under the logo. This is the type of Header I am trying to create. Can it be done? If so, how?
— Thanks
For some reason I can’t enter a link of the website here, so please copy/paste the following…
neierinc.com

[David]

Ok – so in Customizer > Widgets > Header add a Text Widget and paste this as the content:

<p style="text-align: center;"><strong>Transportation & Environmental Solutions</strong>
<br>
Tanker & Van Freight • Hazmat Carrier • 10-Day Hazmat Transfer • Industrial Cleaning • Roll-Offs & Boxes • Hydrovac Excavating
<br>
<span style="color: #FFFF00;"><a href="tel:317-222-4340"><span style="color: #FFFF00;">(317) 222-4340 Emergency 24-hour</span></a></span>
</p>

This should now display to the right of your Site logo.

Are you able to provide a link to the site you’re working on so i can help with the responsiveness and any other tweaking?

[Author]

Posts