Help with CSS issues

I need help on a button issue, I have two websites, one is my live site and an under development, the live site there is a call to action button on the top left, it works great, but for some reason, it isn't working on the cloned site.

Can you help me?

  • Nithin
    • Support Wizard

    Hi Hugo,

    Hope you are doing good today. :slight_smile:

    Since even after running the conflict test the issue remains the same. I'm afraid, this has to do more within the theme side. Also, checked whether there are any 404 errors in general which could lead to such errors but don't' see anything relevant.

    I'm trying to access the live site via the WP admin login shared but it's giving a 404 error when I try to access, the URL as:
    livesiteURL.com/wp-admin

    I guess the /wp-admin is masked, so couldn't double-check whether there are any inline CSS which aren't missed in the staging. Could you please check, and see whether there are any CSS missing from Appearance > Customize > Additional CSS section when compared with Live and staging?

    Could we know where exactly in the theme side the toggle button on the top right corner is added? Is there an option to re-configure it again? If yes, maybe you could check whether configuring the settings via the Theme Options would help or not.

    Other than these aspects, if the issue still exists, then I'm afraid re-running a new clone/staging might be more helpful if it's specifically related to the theme side.

    Please do advise if we have missed out anything specific so that we could check further if needed.

    Kind Regards,
    Nithin

  • Hugo
    • WPMU DEV Initiate

    you can try to login, on my side both works.
    livesiteURL.com/wp-admin
    livesiteURL.com/beheer

    This is all the code we added. All this css is not added into Appearance > Customize > Additional CSS but its find into Uncode child > Thema options > CSS & JS
    The HTML code you can find into the CALL menu in both websites the codes are the same

    That said is it possible to just copie the menu from one to another side, because all the content in the website is difference and almost ready to go live.

    HTML:
    <span class='icon green col-sm-4'> <span class='handle'> <span class='fas fa-charging-station'></span> </span> </span>

    CSS:
    /*on off button*/
    .col-sm-4 { margin-top: -1.1em;}
    #menu-call{ padding-right:50px !important; }
    #menu-call a{color:white !important;}
    .icon { position: relative; left: 50px; border-radius: 30px; background-color:#f3912d !important; box-shadow: 0 2px 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 3px 0 rgba(0, 0, 0, 0.2); width: 101px !important; height: 52px !important; margin-right: 40px; overflow: hidden; -webkit-transition: all .25s linear; -moz-transition: all .25s linear; -o-transition: all .25s linear; transition: all .25s linear; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
    .icon .handle { width: 50px; height: 50px; border-radius: 30px; position: absolute; top: 1px; left: 1px; background-color:#FFF; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0px 4px 23px 0 rgba(0, 0, 0, 0.08), -2px 4px 4px 0 rgba(0, 0, 0, 0.1); font-size: 14px; line-height: 13px; color: #6D808E; text-decoration: none; font-size: 22px; color: #D8DAD9; line-height: 50px; text-align: center; -webkit-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1); -moz-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1); -o-transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1); transition: all 0.4s cubic-bezier(0.33, 1.6, 0.66, 1);}
    .icon .handle:before { -webkit-font-smoothing: antialiased;}
    .icon .handle:after { content: "ON"; font-size: 22px; font-weight: 400; color: #FFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); position: absolute; left: -50px;}
    .icon .handle:before {content: "OFF"; font-size: 22px; font-weight: 400; color: #FFF; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); position: absolute; left: 60px;}
    .icon.on { background-color:#FFA400;}
    .icon.on .handle {left: 80px; color: #FFA400;}
    .icon.on.green {background: #65b32e !important;}
    .icon.on.green .handle {color: #65b32e;}
    /*end icon top bar*/

    JS:
    <script>
    (function () {
    $(function () {
    return $('.icon').on('click', function () {
    if ($(this).hasClass('on')) {
    return $(this).removeClass('on');
    } else {
    return $(this).addClass('on');
    }
    });
    });

    }).call(this);

    //# sourceURL=coffeescript
    </script>

    <script>
    jQuery(function() {
    jQuery('.icon').click(function() {
    setTimeout(function() {
    window.open("https://agrisneltank.nl/","_self");
    }, 1000 /* time to delay */ );
    });
    });
    </script>

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.