Arena Responsive Page Log

Lisa,
The only real solution for that is to rely on an Advanced HTML module to
1. Display the image
2. hide the header text to remove the organization name.

You would use jquery to hide the header element.

You would add the module to the template so that it would display on each page.

As Martin said, you use the Advanced HTML module on the Template, Members Responsive, under the Main Content. Here is our script that does that and updates all the colors to match our colors. I am glad to work with you to accomplish your goals. You will have to edit this to point to your site as well as add your own image. A detail to remember on the Advanced HTML module is to set Enable Editing to false. You do not want to edit from the website side as that will destroy the script. 

Here is my script as it is on our Members Responsive template:

<script>
$(document).ready( function() {
// Hides the organization name
$("span[id$=_orgName]").hide();

// Sets the main page ID for reference
var frm = document.getElementById("frmMain");

// Creates the new <a> tag
var anchor = document.createElement("A");

// Creates the id name for the new <a> tag
anchor.setAttribute("id", "fargoHope");

// Identifies the placement for the <a> tag
frm.getElementsByClassName("container")[0].prepend(anchor);

// The <a> tag ID name and redirect page url
document.getElementById('fargoHope').href = "">https://www.fargohope.org";

// Creates the space for the logo image
var logo = document.createElement("IMG");

// Creates the alternate description for the image
logo.setAttribute("alt", "FargoHope");

// Adds the correct image url or location
logo.setAttribute("src", "">www.fargohope.org/.../Hope-Logo-White-png600px.png");

// Sets the image height
logo.setAttribute("height", "80px");
logo.setAttribute("class", "responsive");

// Identifies the <a> tag to attach the logo
document.getElementById('fargoHope').append(logo);
})
</script>

<style>
/*Hide org name*/
#ctl05_orgName {
display: none;
}

/*Font color for page body*/
#arenaBody {
color: #2d2f36;
}

.header {
background: #e51937;
padding: 1.0rem 0;
}

.responsive {
width: 100%;
max-width: 250px;
height: auto;
}

#fargoHope > img {
display: block;
margin: 0 auto;
position: relative;
bottom: -10px;
}

.navbar-default {
background: rgba(77,79,92,.04);
border-left: #e7e7e7;
border-right: #e7e7e7;
border-top: 0px solid #fcb334;
}

/*Font color for header navigation*/
#frmMain nav div div div.navbar-header a {
color: #2d2f36;
}

/*Font color for buttons*/
#main-nav div ul li a {
color: #2d2f36;
}

.btn-primary {
background-color: #e51937;
border-color: #e51937;
}

.btn-primary:hover {
background-color: #fcb334;
border-color: #fcb334;
}

.btn-primary:active {
background-color: #4d4f5c;
border-color: #e7e7e7;
}

.btn-primary:focus {
background-color: #4d4f5c;
border-color: #e7e7e7;
}

.footer {
background: rgba(77,79,92,.9);
border-bottom: 1.5px solid #e51937;
color: #ffffff;
}
</style>

colmstead said:

A detail to remember on the Advanced HTML module is to set Enable Editing to false. You do not want to edit from the website side as that will destroy the script.

and if you do that, you'll need to set your Pages page to Validate Request = No, or your page editor will squawk and say "dangerous input detected" when you edit HTML with the Page page...

Would someone confirm that this is correct?