Issue with SALON theme causing logo to not display on Wordpress site

It's puzzling why the logo image I uploaded to the WP theme isn't showing up on the front-end.

I've reached out to the theme developers multiple times, but it's been two months without a response, and my client, as well as myself, are getting increasingly frustrated!

You can find the CSS and HTML below:

logo {
    z-index: 3;
    position: fixed;
    top: 40px;
    left: 40px;
}

#logo {
    font-family: "raleway";
    color: #4d4b4b;
}

#logo-default {
    position: absolute;
    transition: all 0.5s ease 
}
<div class="logo">
    <img href="http://cardiffcosmeticacupuncture.com" id="logo">
      <img id="logo-default" src=http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png" data-src=http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png" alt="logo" />
    </img>
</div>
csswordpressthemes

Answer №1

To utilize HTML in this manner, it is important to note that images cannot be nested within each other.

.logo {
  z-index: 3;
  position: fixed;
  top: 40px;
  left: 40px;
}

#logo {
  font-family: "raleway";
  color: #4d4b4b;
}

#logo-default {
  position: absolute;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease
  -moz-transition: all 0.5s ease
  -ms-transition: all 0.5s ease
}
<div class="logo">
  <img id="logo-default" src=http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png " data-src=http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png" alt="logo/>
</div>

Answer №2

logo { must be changed to .logo {

Make sure to properly close your image tag: <img src="..." />

Have you checked if the website is using SSL? Consider changing http to https for security reasons.

Answer №3

Feel free to update your theme code with the revised version below:

<div class="logo">
    <a href="http://cardiffcosmeticacupuncture.com" id="logo">
      <img id="logo-default" src="http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png" data-src="http://cardiffcosmeticacupuncture.com/wp-content/uploads/CCA_LogoMain.png" alt="logo />
    </a>
 </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The img:first-of-type selector targets specifically the first image within a group

When a user visits my website using a touch device or without Javascript support, I want the first of two images to display. To achieve this, I am targeting them using Modernizr. The menu button at the top of the page: <img src="menubutton.png" alt="M ...

htmlcssmodernizr

Sending files over the internet using PHP and cURL

I am trying to upload a file to a WordPress site and then sending it, along with other form data, to Lever's API. Although I can successfully send data to the API endpoint, I am facing difficulties with uploading the file. The file does get uploaded ...

phpwordpresspostcurlfilesystems

Ways to eliminate additional container padding within flexbox

I'm struggling with understanding flexbox and couldn't find any clear explanation on the W3 page about how to remove the extra spacing between containers. For example, in one of their demos, I'm unsure how to achieve a layout similar to lef ...

htmlcssflexbox

Enhancing OpenSeadragon images with custom overlays and managing error messages

Currently, I am experimenting with the Basic Single-Row Tile Source Collection example using the same configurations and tile sources outlined in the example. However, I am encountering difficulties in adding overlays to the first and second images as int ...

javascripthtmlcssopenseadragon

Conceal the scrollbar and enable horizontal swiping using CSS

I have set up a container where I want the content to scroll horizontally from left to right on mobile devices, and I would like to be able to swipe to navigate while hiding the scrollbar. You can view the implementation on this JSfiddle link Do you think ...

javascriptjqueryhtmlcss

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

Is it considered poor practice to modify a Bootstrap class in Bootstrap 4?

For instance: form-control appears like this Would it be considered inappropriate if I incorporate this scss code? .form-control { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ea ...

csstwitter-bootstrapsassbootstrap-4conventions

Issue with CSS Reset code causing disruption for one hyperlink

Check out the menu at this link: http://fiddle.jshell.net/V88c6/8/show/ To view the complete jsfiddle, click here: http://jsfiddle.net/V88c6/8/ Here is the HTML code: <div id="head_1"> <div class="inner"> <div class="column ...

htmlcss

The page fades in as soon as it is loaded thanks to the "

I am interested in creating a unique effect where different classes fade in on page load. Check out this webpage for reference. The linked page showcases squares in various shades of grey and color, with the desire to have them fade in at different inter ...

cssclassfadeinonload

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

Here's a visual representation of my question I'm interested in creating a feature where scrolling will display dots indicating the current position on the page, allowing users to click on them to navigate to specific sections. How can I achieve ...

javascripthtmlcss

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

As I delve into programming with Bootstrap, I encountered an issue while attempting to change the background color of my body. Even though I used the following CSS code: body { background-color: #eba; width: 100%; height: 100%; } The color change ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhance Your Joomla 2.5 Website with Custom CSS Specifically for iPad Viewing

Is there a way to load a specific CSS file when accessing my Joomla website through an iPad? I am running Joomla version 2.5. Although I have set up style-sheets for browsers like Internet Explorer and Firefox, I am unsure how to target the website to lo ...

phphtmlcssjoomlajoomla2.5

Arranging Boxes side by side

I am struggling to align three boxes horizontally on my website, as they are currently stacking vertically. I have implemented Twitter Boostrap's 'row' class in an attempt to achieve this layout. HTML: .img-box-kai { width: 300px ...

htmlcsstwitter-bootstrap

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Currently, I am immersed in a project based on the MVC framework and utilizing the Kendo DropDownList. An problem has arisen, which is visualized in the image below. Specifically, the items of the Kendo DropDownList are becoming obscured by the PDFViewer ...

asp.net-mvccsskendo-uikendo-asp.net-mvc

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

javascriptjqueryioscsstwitter

Is the <style> tag effective when placed within other elements?

When I look at it, I notice something along these lines: <div> <style type="text/css"> ... </style> </div> It seems weird, but it's functional. Does this go against any standards? ...

htmlcss

Tips for personalizing the sidebar on your WordPress site and incorporating a collapsible menu feature

Is there a way to customize the sidebar in WordPress so that all the categories and their children are easily accessible? For example, on https://www.w3schools.com, clicking on the header category "HTML" displays all related links in the left sidebar. I&a ...

htmlcsswordpresstagscategories

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

javascriptjqueryhtmlcssdom

The #skrollr-body element causes all mobile content to disappear

Currently, I am utilizing Skrollr.js for parallax effects and you can find it here: https://github.com/Prinzhorn/skrollr. At the beginning of development, I made sure to test this on mobile to ensure it functioned properly. Initially, everything was workin ...

jqueryioswordpressmobile

Is there a way to reposition the WooCommerce sidebar above the shop items to ensure it displays at the top on mobile devices?

My website has a Woocommerce shop page where the categories are displayed on the left. However, when the page is resized to mobile, the categories shift to the bottom of the page. I wanted to move them back to the top using php, rather than modifying Jav ...

phpwordpresswoocommerce