main nav logo oddity

Question

sorry to trouble you. there's a menu quirk i just can't figure out.

just past 1200px wide mark (browser window, wider.jpg), the logo shrinks in the nav bar when up at the top of the page, growing to "proper" size as you scroll down... if the window is less than that (<1198px), the logo displays properly from the start (larger, slight overlap to content area, see correct.jpg).

for the life of me i can't figure out how to get it to stay the same when viewed on a desktop. help!

apart from that it's all good, no issues for smaller/mobile screen (shrinks, goes to corner opposite hamburger menu), and i'm super impressed with all that canvas has to offer (i have a LOT to learn).

thank-you for any assistance (or code snippets!) you can offer.

SemiColonWeb · Accepted Answer

Hello,

Thanks so much for the Kind Words! :)

We have checked out your Website and this is the CSS Code in the css/custom.css File that is causing this:
[ch_pre type="css"].device-lg #header:not(.sticky-header) #logo img {
height: 140px;
top: -30px;
margin-bottom: -20px;
}[/ch_pre]

We recommend replacing the above block with the following codes:
[ch_pre type="css"]@media (min-width: 992px) {
#header:not(.sticky-header) #logo img {
height: 140px;
top: -30px;
margin-bottom: -20px;
}
}[/ch_pre]

This will ensure that the Logo is large in devices more than 992px. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

TalieJack · Answer

that did the trick, thank you! follow up question: if i wanted the nav bar NOT to shrink (the logo or the height of the nav bar) and stay static for desktops when scrolling, how would i make that happen?

Semicolon Web · Answer

Hello, Simply add the Attribute to the Element. Example: [ch pre][/ch pre] This will definitely work fine. Hope this Helps! Let us know if we can help you with anything else or if you find any further issues.

TalieJack · Answer

you guys are incredible. thank you so much for the help! :)