Logo Size Issue | PenciDesign Support

LemkeTech replied

5 years ago

Customer Reply

Fixed, my bad should've realized lol

My header is perfect on both desktop and mobile now. Thank you so much!

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

Sorry for mistyping on the previous comment, please go to Appearance → Customize → Logo & Header → Main Bar & Primary Menu, check Disable Sticky Main Bar When Scroll Down.

Regards,
PenciDesign.

LemkeTech replied

5 years ago

Customer Reply

Tested the header and the issue is fixed. Only thing that remains is a gap. Not sure exactly what I have to do to fix that.

I'm very impressed with your skills. You respond quickly and the support is phenomenal.

Will recommend you in my discord group.

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. Please go to Appearance → Customize → Logo & Header → Main Bar & Primary Menu, check Disable Sticky Main Bar When Scroll Down,

2. Add this custom CSS to your site:

body {
    margin-top: 60px;
}
#navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999;
}
@media only screen and (max-width: 960px) {
    body {
        margin-top: 55px;
    }
}

Regards,
PenciDesign.

LemkeTech replied

5 years ago

Customer Reply

Going back real quick to what I mentioned earlier,

Is there a way to always have the sticky header 'enabled'? My header is almost perfect, the only problem I'm having now is this 'jumping' effect on mobile and (ever so slightly) on desktop when scrolling fast. Other websites have it a bit smoother. For example, www.gameinformer.com has an ultra smooth header on mobile and desktop. When I right click and 'inspect element', you can see only one line of code changes when you start at the top of the page, and then scroll down.

Meanwhile with this theme you see two lines of code change when it transitions from the top header to sticky header. I've attached two images to show what I mean.

This isn't a major issue or anyhting, but wondering if you have a solution to fix this effect of sorts. My theory is just 'always enable sticky header' but I'm not sure if it works like that.

(Its most obvious on mobile)

LemkeTech replied

5 years ago

Customer Reply

Perfect, that fixed this sizing issue. Appreciate the help!

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi @LemkeTech,

1. Please copy then paste the custom CSS code to Appearance → Customize → Custom CSS:

#navigation.header-6 #logo img {
    max-height: 70px;
}

2. Then go to Autoptimize, clear all the cache and test again.

Regards,
PenciDesign.

LemkeTech replied

5 years ago

Customer Reply

Would you possibly happen to have a CSS code of sorts that disables the 'regular header' and only keeps the 'sticky header' 'on' if that makes sense?

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi @eggipopp,

Please read the document here to find the license code: https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-, then update to your Ticksy account.

You can contact us via email by going to this link: https://themeforest.net/user/pencidesign, sign in with your Envato Account, then fill in your content at the Email PenciDesign section.

Regards,
PenciDesign.

eggipopp replied

5 years ago

Customer Reply

Hello, I've just purchased a new support plan for 6 months but I can't post a ticket.

Also there is basically no way to contact PenciDesign without posting a ticket. But I can't post a ticket!

Where do I fill in the support code?

Eric

LemkeTech replied

5 years ago

Customer Reply

Thanks for the quick reply. The mobile header is fixed using your CSS.

The logo still is large when first loading the webpage however, then shrinks shortly after. I changed the size to 220x125 to test it. Tried smaller and slightly larger too and still shows big at first.

(Only on desktop)

PenciDesign Supporter replied

5 years ago

Staff Reply

Hi,

1. For the logo issue when you scroll on mobile, please add the CSS:

@media only screen and (max-width: 767px) {
    #navigation.header-6 #logo img,
    .is-sticky #navigation.header-6 #logo img {
        max-height: 58px !important;
        padding: 7px 0 !important;
    }
}

2. Please resize your logo and then upload it again. The current image is really large (3910 x 1355), so the browser takes a long time to load a full-size then resize to fit the logo space. You should upload an image that has 220 x 125 px.

Regards,
PenciDesign.

LemkeTech replied

5 years ago

Customer Reply

Additional comment(s):

- The 'jumping/snapping' effect is also present on mobile devices. Desktop is subtle, moble it becomes more obvious.

- And I noticed when you first load the website, the logo loads in 'large' at first and then shrinks to it's appropriate size soon after.

LemkeTech started the conversation

5 years ago

Conversation Start

I had an exact same issue as another user, but I still need slightly more help.

"Prevent header logo from resizing" (#2792113) / PenciDesign (ticksy.com)

I added the custom CSS code you mentioned in that support ticket, and I adjusted the size to fit my site and its good for the most part except for 2 things.

1.) The header kind of 'jumps' when it transitions to the sticky header. It looks kind of glitchy at times, it doesn't happen everytime though.

2.) I can't seem to have it work on mobile/tablet view - only on desktop.

What I'm essentially aiming for is a complete static header across all devices.

I appreciate your time.