Archived topic
Above header hook with widgets and text
16 replies · Started by Kle on September 18, 2018
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.
So should it be 3 columns? ie.
Element 1 left / Image Center / Element 2 right
The image I have it set with another hook bellow.
What I need is:
Element 1 left / Element 2 right.
Thank you 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>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.
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.
It looks like you have an extra <div> before the second element that is not required.
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.
This is not being closed:
<div class="fluid-header-area"> So add another another </div> at the end of the markup to close it.
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>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>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.
: /
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;">
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.
Yes, thats the way to do it for 3 columns.
