How to set Logo Width

Here, you can find how to set logo width and height. In Porto > Theme Options > Logo page, you can see logo width related options. Here, all units are in ‘px‘

Default Logo Width

Set the width attribute of the site logo image tag.
Ensure that a Retina logo is uploaded. Additionally, both the Default Logo Width and Default Logo Height values must be specified for it to function correctly

Default Logo Height

Set the height attribute of the site logo image tag.
Ensure that a Retina logo is uploaded. Additionally, both the Default Logo Width and Default Logo Height values must be specified for it to function correctly

Logo Max Width

Set the maximum width of the site logo.

#header .logo {
max-width: 130px;
}

Logo Max Width on Wide Screen

Set the maximum width of the site logo for wide screens.

@media (min-width: 1460px) {
#header .logo {
max-width: 130px;
}
}

Here, the value of 1460px is dynamic, representing the sum of the Container Max Width and the Grid Gutter Width in the Porto > Theme Options > Layout section.

Logo Max Width on Tablet

Set the maximum width of the site logo for tablet screens.

@media (max-width: 991px) {
#header .logo {
max-width: 130px;
}
}

Logo Max Width on Mobile

Set the maximum width of the site logo for mobile screens.

@media (max-width: 767px) {
#header .logo {
max-width: 130px;
}
}

Logo Max Width in Sticky Header

Input the maximum width of the site logo in sticky header.

#header.sticky-header .logo {
max-width: 130px;
}

Logo Overlay Max Width

A logo overlay refers to the practice of placing a logo on top of another default logo. This technique is commonly used in branding to ensure that the logo remains visible and associated with the content being presented.
Input the maximum width of the site logo overlay.
Apply the max-width style directly as an inline style to the overlay image tag.