Why is our logo A tag pushed down?

[simona6]

On our own website we noticed the link of the Logo is half way down the image, so when you have the popup menu, if you click just in the wrong place you go to to the homepage.

If you visit our website: https://www.79design.org.uk, in Firefox, outline block elements and you see a DIV or A tag that is half way down the logo on the top left.  and it protrudes below the logo.

I've no idea why any designer would do that (this is a WP theme), and no idea how to correct it.  Any help would be appreciated.

[simona6]

Screenshot attached to show CSS highlighting the issue area.

[requinix]

Did you take a look at the parent .grve-wrapper?

[simona6]

Yes, but couldnt' see anything to close it up.  I have since found the Mega Menu CSS, and put a z-index of high value that puts a plaster over the problem.

But can't find a way to just shift that square... UP.  apparentrly it's there to centre the logo, but why that has to shift down, I don't know.

[simona6]

UK here so signing off for now.  If you can see the CSS causing it, so i can just shift it up, it would be appreciated.  Whatever I alter, seems to change the size of the logo.  OR shift the whole block down, rather than just that bordered bit.

As I say, doing it via the UL of the mega menu has place it OVER the DIV, so the problem has gone.  But it's not the most ideal solution.

So if you can spot one - thanks.

[requinix]

First rule of thumb with CSS problems is to try removing stuff instead of throwing more at it.

 

[simona6]

Sorry not with you.  What should I highlight, and then remove or change?

[requinix]

Look at my second and fourth screenshots.

[simona6]

I can see you've outside a Class in the CSS, and one other sectin below that.  Not sure what you are guiding me toward.

[requinix]

"Outside a class"?

Screenshot #1: grve-wrapper selected below, bounding box shown above is too low, highlighted CSS on the right shows a few rules
Screenshot #2: with the position:relative and top:50% rules disabled, the bounding box is in the correct location but the image is too high
Screenshot #3: img selected (the one that's visible), bounding box shows it's too high on the page, highlighted CSS shows a few rules
Screenshot #4: with the top:-50% rule disabled, the bounding box is in the correct location

[simona6]

Ah yes I see it.  So I need to add those two rules in my custom CSS - but oddly, how do I revert -50px?  Do I just add a 50px top instead??

[requinix]

Remember when I said that the first rule of thumb when dealing with CSS problems is to remove rules?

[simona6]

Sure, but how do you remove one, when it is set in the Theme's CSS?  You can usually only 'reverse' a rule such as:

top: 0px;

Or with an 'important' in there, but doubt that's needed.

[simona6]

Is this the answer:

 

.grve-logo .grve-wrapper img {
top: 0%;
}

.grve-logo .grve-wrapper {
top: 0%; 
}

 

[simona6]

.grve-logo .grve-wrapper img {
top: 3%;
}

.grve-logo .grve-wrapper {
top: 3%; 
}

Actually it's a little more like this I think, else the logo is rammed at the top of the DIV with no spacing.

This seems to get it virtually spot on.

Goodness knows why they coded what they did tho - I'm sure they have their reasons, but it makes no sense to me.

[requinix]

If this is coming from some theme then your first course of action would be to contact the author. Not just to see if there's a fix, but also to see if there was a particular reason it was done this way (not that I can think of one). And once fixed, anybody else using it would be able to benefit from your investigation.

If you can't contact the author, or the theme is old and unmaintained, or whatever, then edit the theme.

[simona6]

The theme people told me once, they do not think of it as a fault.  As it is to centralise the logo.  They gave me code years ago, but it has since been lost with theme upgrades.

So the second option is best.  That code I entered has done the trick.  So thank you sincerely.

[requinix]

6 hours ago, simona6 said:

The theme people told me once, they do not think of it as a fault.  As it is to centralise the logo.  They gave me code years ago, but it has since been lost with theme upgrades.

They are stupid and wrong. Perhaps it worked once long ago, but right now it's clearly not the right behavior.