[Support request] Above header hook with widgets and text

[Kle]

Hi there,

I’m trying to set up a hook with elements that will go above all my content. This “header bar” will have some information as well as some widgets inserted with shortcodes. It’s a full width bar.

I’ve tried a few things but haven’t been able to get it to work properly, it changes the position of an image that must be centered and a text that I want to go to the right side it stays in the center (left of the cell/div).

This is the code I have so far:

<div class="fluid-header-area">
<div class="grid-50">
[widget id="black-studio-tinymce-9"]
        </div>
<div>
	<div class="grid-50">
EN / ES
        </div>
</div>

I wonder if this is the best approach and how can i make it work properly.

Attached is a link to a test page I have with this hook.

Thank you.

[David]

So should it be 3 columns? ie.

Element 1 left / Image Center / Element 2 right

[Kle]

The image I have it set with another hook bellow.

What I need is:

Element 1 left / Element 2 right.

Thank you David.

[David]

So if Element 2 is just going to be text you can add a text-align: right; property to it. Which there is already a class for, so your markup would look like this:

<div class="grid-50 top-bar-align-right">
    EN / ES
</div>

[Kle]

Hi David, I implemented the code and still messes up my logo image, sent it to the right side and must be centered.

I don’t know why. The image without this hook aligns to center.

Thank you.

[Kle]

Instead of text, I tried using a widget/shortcut and now it doesnt send the image to the right. Only when using plain text deom the hook the error appears. Strange.

[David]

It looks like you have an extra <div> before the second element that is not required.

[Kle]

I took out what I thought could be the culprit and still I get the image missplace. Here are the two hooks/elements I have:

hook1

<div class="fluid-header-area">
<div class="grid-50 top-bar-align-left">
[widget id="black-studio-tinymce-9"]
	        </div>
<div class="grid-50 top-bar-align-right">
En / Es
        </div>

hook2

<div style="text-align: center; margin-top: 10px;">
<a href="https://website.net/">
<img src="https://website.net/wp-content/uploads/2018/08/Net.jpg" align="center" width="551"  ></a>
</div>
<div class="tagabove" style="text-align: center;">WWW.WEBSITE.NET</div>

I cannot spot the error, thank you for your help.

[David]

This is not being closed:

<div class="fluid-header-area"> So add another another </div> at the end of the markup to close it.

[Kle]

Tried to put that </div> everywhere and still the same error.

Here’s one of the things I tried:

<div class="fluid-header-area"> </div>
<div class="grid-50 top-bar-align-left"> 
[widget id="black-studio-tinymce-9"]
<div class="grid-50 top-bar-align-right">
En / Es
  </div>

[David]

You’re HTML for hoo one should look like thos:

<div class="fluid-header-area">
    <div class="grid-50 top-bar-align-left">
        [widget id="black-studio-tinymce-9"]
    </div>
    <div class="grid-50 top-bar-align-right">
        En / Es
    </div>
</div>

[Kle]

Hi David, no joy.

My logo from hook 2 goes to the right side still with that code. I pasted it exactly as you gave it to me.

: /

[David]

Hi there, right so now we can fix Hook 2.

So this: <div style="text-align: center; margin-top: 10px;"> becomes:

<div style="text-align: center; margin-top: 10px; clear: both;">

[Kle]

Perfect! thank you so much, I haven’t used the clear and both tag before, good to know: )

I only have one more question, if I want to do 3 sections equal in size (instead of 2), to split it will be something like this?:

<div class="fluid-header-area">
    <div class="grid-33 top-bar-align-left">
        [widget id="black-studio-tinymce-9"]
    </div>
<div class="grid-33 top-bar-align-center">
    Content
    </div>
    <div class="grid-33 top-bar-align-right">
        En / Es
    </div>
</div>

Thank you David.

[David]

Yes, thats the way to do it for 3 columns.

[Author]

Posts