Hello,

I am having issues with the header logo auto-resizing itself to a different aspect ratio. The result is a stretched or squashed logo in the top left corner of the screen, on the header. Picture attached.

The issue occurs on various screens and devices, and differently on different sections of the site. For example on mobile, the header is correctly sized on the homepage before scrolling down, but resizes itself after scrolling down the page. On any of the non-home pages (accessed through the menu bar), the logo is stretched at the top of the page but correctly sized after scrolling.

On desktop, it seems to be fine on my 16:9 monitor. On a 4:3 monitor, it has resizing issues.

Is there a way to simply prevent the logo from resizing and maintain it's aspect ratio across all screens? The logo is rectangular and uploaded under Riven general settings > logo. Thank you!

Hi Alex,

Thank you for the response. I've tried your suggestion but the result is a very very small logo+text now. I've tried this with both a 300x75 px image (the intended size) and a larger 2000x500 px image (to be downsized), with the same result: a very small header image.

I do not see any other css that affects .header-v3 in the file. Do you have any other suggestions of css code to modify the logo? Or perhaps of the proper resolution image to upload? The 300x75 px image is a little blurry. I believe this is the close to the correct way to fix the issue, but I'm not very experienced with css and I don't know what other lines of code to try. Thank you very much.

Hi Alex,

I think I've mostly figured it out, but I do have a related question that's confusing me. The padding/margin on the header is different on the home page of the site versus the other pages of the site (as in the other pages navigated to from the menu - gallery, info, contact, etc). Setting certain padding and margin will have the logo vertically centered on the home page, but vertically off-center on the other pages of the site.

In addition, the logo is left justified on the home page, but horizontally centered on the other pages of the site. There is no additional CSS on the home or other pages.

Do you have any idea why this is, or how I can change the settings for non-home pages? And how I can change the left/center justification? Thank you!

Ok, I want to clarify the issue a bit more. I've attached a few images, showing the differences in vertical alignment on various sections of the site. As you can see, on the home page the top left logo is vertically aligned, but on the about (and other non-home) sections, it's aligned to the top. The image no longer resizes, but I would really like to have everything aligned to the center of the header. It's also a very noticeable issue on mobile.

Below I've posted the code relevant to the header, found in the styles.css in the Riven theme. It seems that the home page and non-home pages must be defined differently, yet changing the sizes of the logo in .header-v3 changes all pages on the site.

.header-v3 {
    height: 100%;    
}

.header-v3 .header-logo img {     
    height: 100%;
    max-width: 100%;
    width: auto;
    padding-top: 3px;

}
.fixed-header .header-v3.is-sticky .header-logo {
    margin-top:10px;
 }
.header-v3.is-sticky .header-top {
    background:#000;
}

.header-v3.is-sticky .header-logo img {
    height: auto;
    max-width: 100%;
    width: auto;
    padding-top: 3px;
}

I've tried all sorts of modifiers, such as: vertical-align: middle, text-align: center, justify-content: center, align-items: center. But none seem to do what I want. I've also tried these with display: flex, display: inline-block, etc. But these only change the menu items, not the logo. The logo always stays where it is, stuck to the top (at least on the non-home pages).

I'm a bit new to this so I'm struggling a little bit with the proper definitions, and I'm not sure why the home/non-home pages are behaving differently, or how I should define the header in order to get vertical-align:middle to work (.header-v3, .header-v3 .header-logo, something else??). Any help would be very much appreciated. Thank you!

Best,

Dylan

Hey Alex,

Thank you so much, this works! The logo is now centered. The header space is a little bit tall, taking up a bit more space than is ideal, but that's alright if this is the best way to fix this. There's only a few minor issues remaining.

1. On all pages, the menu items are slightly vertically offset, not vertically centered. See picture 1. 

2. On mobile, the logo is quite large on the home page, but is nicely sized and centered on the non-home pages. See picture 2.

3. I'm also curious,  while I'm here, how I can left-justify the logo on non-home pages (it's centered) or how I can center justify the logo on the home page (it's currently left justified). Not sure what I like more, but it should be consistent.

Again, thank you so much for the assistance, it's much appreciated.

By the way, if you're curious about the site and haven't seen already, it's www.hyperspacelight.com :)

Best,

Dylan

Hi Alex,

Thank you so much, this fixes the issue. The menu looks perfectly sized and aligned now. Except for one exception. On the desktop everything is perfect, on mobile home screen everything looks perfect, but on the mobile non-home pages the centered logo is not vertically centered. It is at the top of the menu bar. The menu bar seems to be the same height as on the home page. Any idea why it would be different on these non-home pages? Thank you.

Sure thing, attached is the menu bar on the home screen and the non-home screen. The logo is not vertically centered on the non-home screen. I'm also unsure why it's horizontally centered on the non-home, but perhaps left justifying would help?

Thank you!! Ok, so close... but now when scrolling down the page on the non-home screen the logo is cut off to the left. Picture attached. I tried removing the left: 15px lines, in various spots but it did not seem to work. This should be the last issue to fix! Here is the full header code in case it helps:

.header-v3 .header-logo img {
    height: 100%;
    max-width: 100%;
    width: auto;
    padding-top: 3px;
}
.header-v3.is-sticky .header-top {
    background:#000;
}

.header-v3.is-sticky .header-logo img {
    height: auto;
    max-width: 100%;
    width: auto;
    padding-top: 3px;
}
@media (min-width: 992px){
    .header-v3 .header-logo {
        margin: 10px 0 4px !important;
    }
    .header-v3 .header-logo a {
        display: inline-flex;
    }
}

@media (max-width: 991px){
    .fixed-header .header-v3 .header-logo {
        left: 15px;
        margin-top: 6px;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        z-index: 5;
    }
    .header-v3 .header-logo {
        margin-top: 5px;
        left: 15px;
        position: absolute;
        transform: none;
        -ms-transform: none;
        -o-transform: none;
        -webkit-transform: none;
        -moz-transform: none;
        top: 6px;
    }
    .header-v3 .header-logo img,
    .header-v3.is-sticky .header-logo img    {
        padding-top: 0;
        max-height: 55px;
    }
    .fixed-header .header-v3 .header-logo,
    .fixed-header .header-v3.is-sticky .header-logo    {
        margin-top: 4px;
    }    
}

@media (max-width: 480px){
    .header-v3 .header-logo {
        margin: 5px 0 !important;
    }
}

Ok I now have the following within @media (max-width: 991px)

    .fixed-header .header-v3 .header-logo,
    .fixed-header .header-v3.is-sticky .header-logo    {
        margin-top: 4px;
        left: 15px;    
    }

However the left:15px line does not do anything. The logo is still off the page. Also other values, 30px, 40x, does not change. I have tried adding left:15px under other sections and it has no effect, and I have tried to add it under .header-v3 .header-logo (without .fixed-header) with no effect. It seems that the sticky logo is tied to and offset from the fixed logo location, and adding left/right: 15px does nothing. Screenshot added to show what happens when changing

.header-v3 .header-logo { left: 60px }

The fixed header is more centered, and the sticky header is less cut off. So the locations seem tied to each other? Not sure why the left:px command does not work for sticky though...


I have also encountered another minor issue. On chrome browser, when I zoom and enlarge the page (ctrl+), the header logo becomes distorted. Specifically, the it gets much larger vertically and horizontally stays the same. I've tried to add max-height: 100%; but this simple makes the logo extremely vertically large, very distorted. On firefox, the logo remains the correct aspect ratio when enlarging the page. Any ideas why?

Thank you so much once again for all the help, I really appreciate it.

Hi Alex,

I still have the issue where the logo is cut off when scrolled down on the non-home pages on mobile. Have you made any changes to this code that would fix it?

Hi Alex,

It is indeed working now! The logo is no longer cut off. Thank you so much for your help fixing this issue, I really appreciate it.

I just have one last little issue. This is only in chrome on the desktop - when I resize the browser window, the logo gets distorted. This also happens if I increase the page zoom (ctrl +) too much. I've attached a picture to show. I think it needs a max-width and max-height. This is only in chrome browser. In firefox the logo does not become distorted.

Let me know if you have an idea to fix this. This should be the last little issue to fix. Thank you!

Best,
Dylan

Hi Alex, the issue is fixed now! Thank you so much!

Ok I actually have one more minor issue that you may be able to help with. I would like to disable CSS animations on mobile. They load in slowly so it is not desirable. I have tried the following:

@media (max-width: 991px) {
    * {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
}


But this does not work. Any ideas here? Thank you!

Will do. Thank you for all the help you've provided, it's much appreciated!

Absolutely, I've rated and left a review. Thank you again for all the help!