Hello! Sorry for the delay. I’ve hacked things a bit but one item remains – when mobile, the logo reverts back to the non transparent version. Here’s all of my code (functions.php and css), to help others as well:

functions.php

//--------------------------------

// hack to use trans logo

//--------------------------------

function custom_script() { ?>
    <script>
(function ($) { 
  $(window).load(function() {    
        $("#top.page-id-932 #header").addClass('av_header_transparency');
        $('#top.page-id-932 .logo').append('<span class="subtext"><img src="https://oneoakaustin.com/wp-content/uploads/2021/07/One-Oak-Bouldin-Creek-logo-transparent.svg" class="alternate" alt="Corporate logo" title=""></span>');
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

and my css:

/**************************************************

logo swap hack in functions.php addition

- home option page - 932

#header_main bg needs to be transparent

**************************************************/

#top.page-id-932 #header.av_header_transparency,
#top.page-id-932 .av_header_transparency #header_main {
    /* background: rgba(0, 0, 0, 0.5)!important; */
}

/* force main bg on scrolling */

#top.page-id-932 .header_color .header_bg {
	/* background: #4a4747!important;  dk mushroom */
}

/* force pancake lines closed  */
    
#top.page-id-932 .header_color .av-hamburger-inner,
#top.page-id-932 .header_color .av-hamburger-inner::before,
#top.page-id-932 .header_color .av-hamburger-inner::after {
        background-color: #c6b193 !important; /* taupe */
    }

/* force widget custom reg button */

#top.page-id-932 #header.header_color #header_main .widget a.buW2 {
    border: 1px solid #f2efee !important; /* off white */
    color: #f2efee !important; /* off white */
    background: #4a4747!important; /*  dk mushroom */
    margin-right: 50px !important;
    margin-top: 43px !important;
    width: 300px !important;
}

/* force pages to have a different bg after scrolling  */

.page-id-932 #header_main {
	background: #4a4747!important; /*  dk mushroom */
}

/* custom main menu for alternate - before and after scrolling */

#top .page-id-932 .av-main-nav>li.current-menu-item>a>.avia-menu-text,
#top .page-id-932 .av-main-nav>li.current-page-ancestor>a>.avia-menu-text {
  color: red!important;
}

#top .page-id-932 .av-main-nav li a:hover .avia-menu-text,
#top .page-id-932 .av-main-nav li.current-menu-item > a > .avia-menu-text {
    color: blue !important;
}

#top .page-id-932 .av-main-nav>li.current-menu-item>a>.avia-menu-text,
#top .page-id-932 .av-main-nav>li.current-page-ancestor>a>.avia-menu-text {
  color: blue !important;
}

/* smallest portrait phones *************************************************/

@media only screen and (max-width: 767px) {
    
	/* start max 767 */
    
    
 #top.page-id-932 .responsive .logo img,
    .responsive.html_mobile_menu_tablet #top.page-id-932 .av_header_transparency.av_alternate_logo_active .logo a > img {
    height: 50px !important;
    width: auto!important;
    max-width: 100%;
    display: block;
    margin: 0px !important;
    /* max-height: 120px!important; */
        
        
}

  
    
    /* end max 767 */
}

I have tried disabling all of the plugins and that did not work. I keep seeing this error. That seems to be an ajax error, no?

[DOM] Found 5 elements with non-unique id #_ajax_nonce: (More info: https://goo.gl/9p2vKq) input#_ajax_nonce input#_ajax_nonce input#_ajax_nonce
accept: “”
accessKey: “”
align: “”
alt: “”
ariaAtomic: null
ariaAutoComplete: nullaria
Busy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: nullaria
Current: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: type, 1: id, 2: name, 3: value, type: type, id: id, name: name, value: value, length: 4}
autocapitalize: “”
autocomplete: “”
autofocus: false
baseURI: “https://globalvitiligofoundation.org/wp-admin/post.php?post=11&action=edit&classic-editor=1”
checked: false
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: “”]
className: “”
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: “inherit”
dataset: DOMStringMap {}
defaultChecked: false
defaultValue: “29d1b59ebe”
dir: “”
dirName: “”
disabled: false
draggable: false
elementTiming: “”
enterKeyHint: “”
files: null
firstChild: null
firstElementChild: null
form: form#post
formAction: “https://globalvitiligofoundation.org/wp-admin/post.php?post=11&action=edit&classic-editor=1”
formEnctype: “”
formMethod: “”
formNoValidate: false
formTarget: “”height: 0
hidden: false
id: “_ajax_nonce”
incremental: false
indeterminate: false
innerHTML: “”
innerText: “”
inputMode: “”
isConnected: true
isContentEditable: false
labels: nulllang: “”
lastChild: nulllastElementChild: nulllist: nulllocalName: “input”max: “”maxLength: -1min: “”minLength: -1multiple: falsename: “_ajax_nonce”namespaceURI: “http://www.w3.org/1999/xhtml”nextElementSibling: nullnextSibling: nullnodeName: “INPUT”nodeType: 1nodeValue: nullnonce: “”
offsetHeight: 0offsetLeft: 0offsetParent: nulloffsetTop: 0offsetWidth: 0onabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforecopy: nullonbeforecut: nullonbeforepaste: nullonbeforexrselect: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncopy: nulloncuechange: nulloncut: nullondblclick: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullonformdata: nullonfullscreenchange: nullonfullscreenerror: nullongotpointercapture: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonpaste: nullonpause: nullonplay: nullonplaying: null
onpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerrawupdate: nullonpointerup: nullonprogress: nullonratechange: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonselectionchange: nullon
selectstart: nullonstalled: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitioncancel: nullontransitionend: nullontransitionrun: nullontransitionstart: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkitfullscreenchange: nullonwebkitfullscreenerror: nullonwebkittransitionend: nullonwheel: null

outerHTML: “<input type=\”hidden\” id=\”_ajax_nonce\” name=\”_ajax_nonce\” value=\”29d1b59ebe\”>”outerText: “”ownerDocument: documentparentElement: td.leftparentNode: td.leftpart: DOMTokenList [value: “”]pattern: “”placeholder: “”prefix: nullpreviousElementSibling: div.submitpreviousSibling: div.submitreadOnly: falserequired: falsescrollHeight: 0scrollLeft: 0scrollTop: 0scrollWidth: 0selectionDirection: nullselectionEnd: nullselectionStart: nullshadowRoot: nullsize: 20slot: “”spellcheck: truesrc: “”step: “”style: CSSStyleDeclaration {additiveSymbols: “”, alignContent: “”, alignItems: “”, alignSelf: “”, alignmentBaseline: “”, …}tabIndex: 0tagName: “INPUT”textContent: “”title: “”translate: truetype: “hidden”useMap: “”validationMessage: “”validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}value: “29d1b59ebe”valueAsDate: nullvalueAsNumber: NaNwebkitEntries: []webkitdirectory: falsewidth: 0willValidate: false[[Prototype]]: HTMLInputElement input#_ajax_nonce input#_ajax_nonce

Rikard do you know if there is a way to set the height to be automatic based on the height of the content?

This doesn’t seem to work:

<iframe src=”https://www.gettingthereguide.com/latest_info&#8221; width=”100%” height=”100%” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

update – i found the existing interim solution https://kriesi.at/support/topic/page-scrolls-to-google-maps-automatically-when-text-marker-is-shown/ so this request can be closed – many thanks anyway.

Hello @Ismael

It is weird because in the soundcloud iframe code there is no loading=”lazy” in the code

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/2541798&color=%23ebce45&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true" width="100%" height="450" frameborder="no" scrolling="yes"></iframe>

Also the other link i sent you does not have any soundcloud iframe .. so could you check that one too ?

• This reply was modified 4 years, 8 months ago by Cloudypro.

Quick Update .. I found another thread with a similar request (sorry) and added in this to the Quick CSS panel and it seems to be working!! Is there a way to make the logo shrink a little when the user scrolls down?

#top .logo {
padding-top: 0px;
width: 300px;
margin: 10px auto;
float: none;
height: auto;
}
.logo, .logo a {
overflow: visible;
}
.logo img {
max-height: 200px !important;
}