Logo issue

Hello,

Same issue as above, 232×1000 px logo shows up on the page (www.dougsgarage1965.com) as a severely cropped square, if at all. Tried exact steps listed above by Daniel, still cropped.

Thank you,

Dave

If by header image you mean logo then it’s not the size limit of the logo but the size limit of the navbar. You can’t display an image larger than it’s container. If you want a larger logo you need to rethink the entire logic of the navbar.

I know onedesign is working on new version to fix this problem,
but I’ve no time to wait,
so I check the navbar sidebar using web browser under check element and found out the menu bar and its container is set to fixed height 80px (with large menu selected), so I’ve tried to select all setting which included “80px” (I know I’m stupid but I’m a struggling graphic designer…) and change to my logo size which is “150px”, here its the code I’ve copied to Appearance/theme option/design/custom css:

Please delete everything in “(description for wp newbie as me)”
__________________________________________________
.body-navbar-offset {
margin-top: 50px;
}

@media (min-width: 768px) {
.body-navbar-offset {
margin-top: 60px;
}
}

@media (min-width: 992px) {
.body-navbar-large.body-navbar-offset {
margin-top: 150px; (<–changed to your logo height)
}
}

.admin-bar .navbar-fixed-top {
top: 32px;
}

@media (min-width: 992px) {
.navbar-large {
min-height: 150px;(<–changed to your logo height)
height: 150px;(<–changed to your logo height)
}
}
@media (min-width: 992px) {
.navbar-large a.navbar-brand {
padding: 16px 15px;
line-height: 48px;
height: 150px;(<–changed to your logo height)
}
}

@media (min-width: 992px) {
.navbar .nav > li > a {
max-height: 60px;
}

.navbar-large .nav > li > a {
max-height: 150px;(<–changed to your logo height)
padding: 30px 20px;
}

.navbar-large .nav > li.menu-item-has-description > a {
padding: 20px 20px 18px;
}
}
.navbar-brand > .site-logo {
display: inline-block;
width: auto;
max-height: 48px;(<–changed to your logo max height in mobile)
vertical-align: top;
-webkit-transition: height .25s ease, max-height .25s ease;
-moz-transition: height .25s ease, max-height .25s ease;
-ms-transition: height .25s ease, max-height .25s ease;
-o-transition: height .25s ease, max-height .25s ease;
transition: height .25s ease, max-height .25s ease;
}

@media (min-width: 992px) {
.navbar-large .site-logo {
max-height: 120px;(<–changed to your logo height in normal web browser which smaller than container height)
}
}
_________________________________
So the css code involve 2 parts:
1. Container which restrain the menu and logo size.
2. Logo height in both normal web browser and mobile browser.

At first I’ve made a mistake,
I thought @media is only affect mobile setting which its actually affect the logo size in normal web browser!
Hopefully this help to newbie!

My logo is only 55pix high and it still makes it so small I can hardly see it (it is 16×16 when it displays on the live page). So what is the solution for a logo that SHOULD fit into the space? Also, when I try to upload the logo to my media library, it freezes up so I can never choose “Use As Logo”. However, it does show up in the library anyhow… It freezes like this on any browser that I’ve tried, and 2 different computers and only when in the Theme Options/Logo section – not when I upload images directly to the media library.

• This reply was modified 9 years, 7 months ago by cmeurer.