Jump to content
simona6

Why is our logo A tag pushed down?

Recommended Posts

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.

Share this post


Link to post
Share on other sites

Screenshot attached to show CSS highlighting the issue area.

ss.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

image.png

image.png

image.png

image.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Look at my second and fourth screenshots.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

"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

  • Like 1

Share this post


Link to post
Share on other sites

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??

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Is this the answer:

 

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

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

 

Share this post


Link to post
Share on other sites
.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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.