Creating an inclusive h1 header with a logo: A step-by-step guide

Is there a way to have a logo linked to the homepage and also have an h1 element that is invisible?

This is my current layout:


<header id="pageHeader">
    <h1>
        <a href="<?php bloginfo('url'); ?>">
            <?php bloginfo('name'); ?>
        </a>
    </h1>

I've tried using CSS to set the image as a background, but the logo is not loading. Can anyone help with this issue?


header#pageHeader h1 a {
  width:130px;
  height:70px;
  text-indent:-9999px;
  background:url(/pict/logo.png);
  background-repeat: no-repeat;
}
htmlcsshtml-heading

Answer №1

Don't forget to include display:inline-block;

Check out this example versus this one

See the disparities in this post, excerpted here:

inline-block
This setting makes an element generate an inline-level block container. The interior of an inline-block is styled as a block box, and the element itself is formatted as an atomic inline-level box. inline
This setting makes an element generate one or more inline boxes.

sorry to explain why this works:

Inline indicates only occupy necessary space and allow other elements to coexist in the layout with me. Your anchor tag has no text content. Therefore, it doesn't require any space, so it won't take up any.

inline-block signifies occupy the space configured for me (as defined in the CSS) and also allow elements to flow alongside me. This includes width and height, unlike inline elements.

Another option is block, which means occupy a full row without allowing anything to flow beside me

Answer №2

The solution is to simply use either display:block or display:inline-block

Check out the JSFiddle Demo here!

#headerTitle h1 a {
    width:130px;
    height:70px;
    text-indent:-9999px;
    background:url(http://lorempixel.com/output/abstract-q-c-130-70-8.jpg);
    background-repeat: no-repeat;
    display:block;
}

Answer №3

The best method to approach this is by making sure it is easily accessible

<h1><a href=...><img src=... alt=... border=0></a></h1>

Answer №4

To resolve a JavaScript issue, you can simply include 

onclick="location.href='yourblog';"
in your h1 tag.

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

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

javascriptcssreactjsmaterial-uijsx

Ways to display the name of the month instead of displaying the numerical value of the

The current value in my month variable is 2019-12. <p class="col-md-1"><?php echo $cm['month']; ?></p> I am looking to display the date as DEC 2019. ...

phphtmldate

Convert Soundcloud thumbnail into a printable format using the @media print CSS rule

For those wanting to add an embedded Soundcloud player on a blog: <iframe width="500" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/271188615&color=%23ff5500&auto_p ...

htmlcssprintingmedia-queriessoundcloud

Utilize AJAX, PHP, and MySQL to create a search functionality that retrieves data from a MySQL database based on a dynamically generated variable

I'm in the process of creating a custom part builder and am working on implementing a search function within MySQL Database based on the Part Number generated. The goal is to display the price in a table cell. However, I'm encountering difficulty ...

phpjqueryhtmlmysqlajax

Identify and automatically switch to the mobile site following a selection

Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...

javascripthtmlmobiledetect

What location is most ideal for incorporating JavaScript/Ajax within a document?

Sorry for the seemingly simple question, but I would appreciate some clarification from the experts. When it comes to the three options of placing JavaScript - head, $(document).ready, or body, which would be the optimal location for ajax that heavily rel ...

javascripthtmljqueryajaxjquery-events

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

phphtmlcssresponsive

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Do you have any recommendations for a creative CSS method to achieve a full-screen background image?

After searching online and experimenting with different methods, I have yet to discover a solution that suits my needs. My goal is to have the background image on my website centered, filling the entire browser screen, while also being compatible with resp ...

htmlimagecssbackground-image

Confirmation of numerous checkbox selections

I am facing a challenge with a form that contains multiple questions answered through checkboxes. I need to validate that at least one checkbox is selected in all the questions, otherwise an alert message should pop up. Is it possible to achieve this val ...

javascriptjqueryhtml

Creating a responsive layout for displaying products using CSS and HTML

I have a project that requires me to showcase products in a specific manner while being responsive. Here's what I want to accomplish: Based on your opinion and experience, what method do you recommend using to achieve this? Should I use divs, tables, ...

htmlcsslayoutresponsive-design

Placing divs in rows and columns at specific breakpoints

I have a footer with two divs that I need to be centered and side by side. When the screen size reaches 960px, I want the second div to move below the first one while still staying centered. Does anyone know how to achieve this? Below is my code snippet: ...

htmlcssflexbox

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

cssflexbox

The stick division shows some bouncy behavior when seen on a mobile device

When viewing on mobile, the #main-categories div seems to be jumping instead of smoothly sticking to the top. What could be causing this behavior? Here is the code snippet I have: var s = $("#main-categories"); var pos = s.position(); $(window).scroll(f ...

jqueryhtmlcsssticky

Changing padding of a button causes surrounding elements to move?

Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...

htmlcssbuttonmouseeventstylesheet

Changing the height of a table row using CSS transitions

I need help with a CSS table that has rows of the same height. I want to make it so that when a user clicks on one row, that row expands to fill the entire table height while the other rows fade away. I originally had this working by setting display:none o ...

csscss-transitionscss-tablesrow-height

Iterating through data to showcase vertical columns for a specific time span of 3 years, highlighting only the months with available data

If data has been available for every month over the past 3 years, I need it to be displayed in a specific format. You can refer to this example fiddle for reference: https://jsfiddle.net/bthorn/ncqn0jwy/ However, there are times when certain months may no ...

javascriptjqueryhtmlcss

Struggling with implementing the use of XMLHttpRequest to transfer a blob data from MySQL to JavaScript

I have a blob stored in my local WAMP64/MySQL server that I need to retrieve and pass to an HTML file using XMLHttpRequest. I know I should set responseType="blob", but I'm not sure how to transfer the blob from PHP to JavaScript in my HTML file. Any ...

javascriptphphtmlmysqlajax

Modify the CSS of the gauge element without causing any issues

I am facing an issue while trying to resize this gauge element. Whenever I attempt to modify the container class to make it smaller, the entire gauge ends up distorting. Changing the position to relative seems to cause glitches at the edge of the gauge. An ...

cssvuejs2

Angular 2 Component attribute masking

In my Angular 2 component called Foobar, I have defined a property named foobar: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-foobar', templateUrl: './foobar.component ...

htmlangulartypescript