appending .site-branding div to custom div

  • Resolved modoseyoum

    (@modoseyoum)


    1 year, 4 months ago

    i was directed to post here regarding suggestions for resolving an issue with a customized header in the twenty-seventeen theme. I’ve got some custom animation happening in the header and am looking for the best way to append the .site-branding div so it appears directly below the #yellow-strip div I’ve created when the site is viewed on mobile. I’ve tried a few different solutions that are problematic, so before i completely recode the container, i thought i’d reach out for suggestions.

    you can get an idea of what i’m trying to do by checking out this codepen: https://codepen.io/modo7seyoum/pen/OJajOdy

    thanks!

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • $(".site-branding").appendTo($("#wp-custom-header"));

    So you are just wanting to move the element without physically moving it in the code?

    Thread Starter modoseyoum

    (@modoseyoum)

    @tugbucket i’m trying to get the .site-branding div to appear directly beneath the #yellow-strip div as it were attached to its bottom border. while that javascript will insert .site-branding into #wp-custom-header, it doesn’t allow me to place it where i want it and make it stay there across viewports. i’m thinking i’m going to have to just recode the header all together.

    thanks for taking a look and let me know if you have any other ideas!

    Thread Starter modoseyoum

    (@modoseyoum)

    @tugbucket turns out your answer led to a solution that’s working for me. hasn’t been deployed yet, but basically i moved the theme’s .site-branding div into the div i created in the header:

    document.addEventListener("DOMContentLoaded", function() {
    var siteBranding = document.querySelector(".site-branding");
    var mpcSiteBranding = document.querySelector("#mpc_site-branding");
    var yellowStrip = document.querySelector("#yellow-strip");

    if (siteBranding && mpcSiteBranding && yellowStrip) {
        mpcSiteBranding.insertBefore(siteBranding, yellowStrip.nextElementSibling);
    }
});

    applying position:absolute to that div and position:relative to the child elements did the trick.

    thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘appending .site-branding div to custom div’ is closed to new replies.