[Resolved] Before Header Hook – odd behavior

Home Forums Support Before Header Hook – odd behavior

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #344481
    Lyle

    This one has me scratching my head.

    I am using this CSS to position and style two Anywhere Elementor shortcodes:

     #my-phone {
        background-color: red;
        position: relative;
        display: inline-block;
        float: left;
        width: 50%;
        padding-top: 11px;
        padding-bottom: 11px;
    }
    
    #my-button {
        background-color: blue;
        position: relative;
        display: inline-block;
        float: right;
        width: 50%;
    }

    If I place the two shortcodes in any of the other hook locations OTHER than Before Header, they appear and style accordingly to the location. But they do NOT show up at all in the Before Header hook location. Through trial and error, I found that removing the float would let the appear, but then they would not be side by side.

    With the above CSS, placing the two shortcodes in the After Header hook location for example, they appear as desired; side by side.

    Not sure what’s happening in this situation 🙂

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #344543
    Tom
    Lead Developer
    Lead Developer

    Try adding them inside a grid container:

    <div class="grid-container">
        shortcodes in here
    </div>

    Sometimes floats need to be cleared, and the grid container does that for you.

    #344740
    Lyle

    Yep, that did it … sort of. But with the div they do not go edge-to-edge; they are of course contained in the “container” 🙂

    What I don’t understand is if I put the two shortcodes, with the noted CSS, into the After Header, Before Footer, After Footer Widgets, Before Footer Content, and After Footer Content hook locations, all is fine. It is only the Before Header hook location that “misbehaves” 🙂 What is different about that spot?

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #344873
    Tom
    Lead Developer
    Lead Developer

    The Before Header hook doesn’t have any sort of container to the clear the floats. The others might? That’s the only explanation I can think of.

    You can create your own self-clearing container with no width: https://css-tricks.com/snippets/css/clear-fix/

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