Logo Moving When Scroll Down, How to fix that?

Web Design
#1

Hi,
I need a solution for this issue, logo not sticking to it’s place and looking quite odd when someone scrolls down.

This site: fittdaily[.]com

Links are not allowed, so please use . in there.

#2

Welcome! Looks like that’s a feature in your site’s WP template to save visual space when a user scrolls down. It’s a fairly common feature, so I wouldn’t worry too much about it. If it really bothers you, check with your template designer or hire a freelance developer to hack it for you.

#3

It would take a while to track it down, but it likely has something to do with the <h1 class="site-title"> that serves as a container for the logo. Well, not specifically that, but more precisely where the CSS class “site-title” is defined in the associated style sheet and how that class interacts with the theme’s media query breaking points.

For what it’s worth, using an h1 tag around the logo is sort of inappropriate. It’s a semantic heading tag, which really ought to be reserved for the main headline on the page, not a logo.

As for it “looking quite odd when somebody scrolls down,” I’m not too sure it looks all that odd. The developer intentionally created the effect and, as Star pointed out, it’s a common way to treat things like this that benefit from a reduced prominence as the viewer scrolls down into the meat of the page. The break points where the jumps occur might be a little ill-timed, but the effect is pretty standard stuff.

Do you know how to use your browser’s (Chrome or Firefox) development tools. There’s a learning curve here that’s too steep and extensive to get into here, but that’s where I’d start tracking down where the effect originates in the code if you’re set on removing it.

#4

If it isn’t bother you guys, then I think it’s fine to use it anyway. Since, I’m not a developer it wouldn’t be a good idea to play with the codes.

Cheers

#5

This is in your css:

.header-image .light .site-title > a {
height: 56px;
}

change it to the size you want like this:

.header-image .light .site-title > a {
height: 12px (<-- change it to wath ever you like) !important;
}

i hope i helped sorry for my bad english.

1 Like