[Support request] Above header hook with widgets and text

Home Forums Support [Support request] Above header hook with widgets and text

Home Forums Support Above header hook with widgets and text

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #680727
    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.

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #680935
    David
    Staff
    Customer Support

    So should it be 3 columns? ie.

    Element 1 left / Image Center / Element 2 right

    #681257
    Kle

    The image I have it set with another hook bellow.

    What I need is:

    Element 1 left / Element 2 right.

    Thank you David.

    #681299
    David
    Staff
    Customer Support

    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>
    #681348
    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.

    #681367
    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.

    #681369
    David
    Staff
    Customer Support

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

    #681388
    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.

    #681438
    David
    Staff
    Customer Support

    This is not being closed:

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

    #681455
    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>
    #681624
    David
    Staff
    Customer Support

    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>
    #681682
    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.

    : /

    #681893
    David
    Staff
    Customer Support

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

    #682278
    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.

    #682289
    David
    Staff
    Customer Support

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.