What are the steps to enlarge the logo in the header of a WordPress website?

I recently added a logo to my website located at 

www.theestablishmenthairdressing.com
, but I am encountering an issue where the logo appears very small in the top-left corner of the header.

Upon inspecting the code using Safari, it seems that there is a size restriction for the logo built into the theme:

<h1 class="header-logo">
   <a href="http://www.theestablishmenthairdressing.com/" rel="home">
      <img class="" width="50" height="50" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing" />                        
   </a>
</h1>

I have attempted to change this by adding custom CSS to the child theme's style.css file:

h1.header-logo {
    width: 200px !important;
}

Unfortunately, this modification did not have the desired effect. If anyone could assist me with resolving this issue, I would greatly appreciate it.

htmlcsswordpress

Answer №1

To transfer the file to the child theme directory where this snippet likely belongs in header.php, eliminate width="50" height="50" from the img tag. You can then proceed with making your modifications in the style.css file.

Answer №2

To achieve the desired effect, consider implementing one of the following options:

    h1.header-logo img {
        width: 200px !important;
    }

or

h1.header-logo>a>img {
        width: 200px !important;
    }

Answer №3

To fix the issue, simply delete the width and height attributes from the image tag:

<img class="" src="//www.theestablishmenthairdressing.com/wp-content/uploads/2017/08/Establishment-LOGO-header.png" alt="The Establishment Hairdressing">

After removing those attributes, the image should display correctly.

Answer №4

Customization for Different Logo Types

header a.logo-light img{ max-height: 26px;}

Styling the Sticky Header Logo

header a.logo-dark img {max-height: 26px;}

Adjusting Footer Logo Size

.footer-logo { max-height: 26px; }

Modifying Hamburger Menu Logo

.hamburger-logo img { max-height: 46px; }

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 div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

javascripthtmlcss

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...

javascriptjqueryhtmlajaxangularjs

Is there a way to modify the CSS display property upon clicking a link or button?

I have a ul with the id of "menu-list". The display property is set to "none" in my CSS file, but I want it to switch to "flex" when a link is clicked. I am trying to use the click event on the link to change the display prop ...

javascriptcssdisplay

Is there a way to submit the value of a textbox that has been generated dynamically using jQuery?

I am currently using the CodeIgniter framework and am attempting to incorporate textboxes in an HTML form. When the user clicks a button, a new textbox should be generated automatically using jQuery. However, when I submit the form, the values of the dynam ...

phpjavascriptjqueryhtmlcodeigniter

What is the best way to show my results in a single line?

$(document).ready(function() { $("#submitForecast").click(function() { return getForecast(); }); }); function getForecast() { var city = $("#city").val(); var days = $("#days").val(); if (city != '' && days != '' ...

javascripthtmlcssajaxapi

Encountering an Uncaught TypeError that is hindering an alert for the score, but I am uncertain about the solution despite the game functioning properly

My Yahtzee code is functioning normally during gameplay, but I'm facing issues with getting alerts for the total score and bonus points. I have identified where the problem lies but I am unsure how to resolve it. I attempted debugging through alerts, ...

javascripthtmltypeerror

Passing Data From AJAX to PHP Server Endpoint

I have been exploring this forum without much success. The following is the HTML code that I am currently working with: <form method="post" id="postform"> <input type="text" name="message" id="message" placeholder='Say "Hello!"&apo ...

javascripthtmlajax

Tips for aligning a Material UI FAB button in the center and keeping it in the center while resizing the window

Is there a way to center a MaterialUI FAB button and keep it centered while resizing the window? The current positioning is not centered, as seen in the screenshot below, and it does not adjust with window size changes. Below is the code for the current F ...

cssreactjsmaterial-ui

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

What is the proper way to include a URL when submitting an AJAX form?

When I try to call a servlet using HTML, jQuery and Ajax by submitting a form, I keep getting a 404 error saying the resource cannot be found. My project is built with Maven. The Servlet is located in the src/main/java package under : com.mycompany.sample ...

javajavascriptjqueryhtmlajax

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property? For instance, in the code snippet below, how can I pass on the value ---numValue=35 to to{--num:}? @property --num { syntax: "<integer>"; initial-value: 0; ...

htmlcss

Sending data to a modal within a loop

I am looking to modify the functionality of my current table setup. Currently, the table is generated by iterating through all the samples passed to it via the context in views.py of my Django app, and this setup is working well. However, I want to imple ...

javascripthtmldjangobootstrap-modal

Dropdown selection returning the text value instead of the designated value

Is it possible to retrieve the text "Region 1" instead of just the value '1' from a dropdown menu in PHP? <select name = 'region' id = 'region'> <option value = '1'>Region 1</option> <select&g ...

javascriptphphtml

The stylesheet is linked, but no changes are taking effect

I've linked my template.php to style.css, and when I make changes in template.php, they show up fine. However, if I make changes in the stylesheet, nothing happens. What should I do? My website is not live; I'm working on it using a WAMP server. ...

javascriptphphtmlcss

I'm finding it a bit difficult to arrange the placement of these DIV

Struggling with a layout issue here. I have a total of 4 DIVs that I want to position in a specific way: Initially, I floated DIV 1 to the left and DIV 4 to the right, which worked as expected. However, things get messy as soon as I try to include DIVs 2 ...

csshtmlcss-float

Steps to utilize a variable in the form action for sending an email

I successfully retrieved the email_id from the first form using jQuery. However, I am struggling to figure out how to use it in the second form's action:mailto: attribute. Any suggestions on how to accomplish this? <form id="sForm" action="mailto: ...

jqueryhtml

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Creating an overlapping div with a frosted glass effect typically requires using an image background (like ). I am interested in having a floating div (position:fixed) that can apply a frosted glass effect over any content below it, whether it be an image ...

javascriptjqueryhtmlcss

Tips for extracting information from a URL and processing it on a webpage

Looking to pull data from a website using AngularJS. My main project is to create a "shipping cart" page. The resource provided is a URL leading to a webpage with information on a specific product. I need to extract this data and integrate it into my pag ...

javascriptangularjsjsonhtml

Automatically filling text fields in JSP using data population algorithms

Currently working on a project using jsp. The page features two text boxes. When the first text box is selected, a list of countries is retrieved from a MySQL database using jQuery. The task at hand now is: Without utilizing any events (especially button ...

javascriptjqueryhtmljspservlets

What is the best way to overlay my slider with a div containing content?

In the hero section of my website, there is a slider with 3 slides. I am looking to add a div element that will display content over these slides at all times, regardless of which slide is currently showing. ...

htmlcss