Skip to main content

CSS To Resize Custom Logo

CSS To Resize Custom Logo


I was wondering if there is some type of CSS code I can insert that can automatically resize my logo depending on the users resolution. 

.header .custom-logo { display: block; max-width: 100%; height: auto; }

Please follow below steps to change the size of the logo on your site by adding simple CSS code.

Step 1: Go to WordPress Admin > Appearance > Customize > Header > Logo and Favicon.

Step 2: You will be able to set the logo size of the SVG Width and Logo Max Height from entering value into the provided text box followed by px.

Code for footer logo

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

Code for Hamburger logo

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


Comments

Post a Comment

Popular posts from this blog

WordPress - Dashboard

  WordPress - Dashboard The WordPress Dashboard is a first screen which will be seen when you log into the administration area of your blog which will display the overview of the website. It is a collection of gadgets that provide information and provide an overview of what's happening with your blog. You can customize your needs by using some quick links such as writing quick draft, replying to latest comment, etc. Dashboard can be categorized as shown in the following snapshot. Each of these categories are discussed in the following sections − Dashboard Menu The WordPress Dashboard provides navigation menu that contains some menu options such as posts, media library, pages, comments, appearance options, plugins, users, tools and settings on the left side. Screen Options The dashboard contains different types of widgets which can be shown or hidden on some screens. It contains check boxes to show or hide screen options and also allows us to customize sections on the admin screen. ...
Post a Comment
Read more