Menu Image, remove border, HELP ASAP

[Marqs]

https://imgur.com/a/b9UMHHz

Linked 2 pictures, these pictures shows the menu atm (In another color). As you can see the social media icons border is going outside the menu. Need som css that can remove a bit of the border and make the images bigger or at least more center.
Thanks <3

[Shikkediel]

Unfortunately we can’t debug a picture.

[Marqs]

Would it help if i post the Navigation bar css?

[Shikkediel]

I think copy pasting the relevant code into Codepen would be most useful.

[Marqs]

https://codepen.io/MarqsN/pen/yZvbGO

Hope this would work.. :/

[Beverleyh]

Just the relevant CSS and HTML is fine – we only need to see enough code to demo the immediate problem. That means stripping things back to the bare minimum amount, while still showing the issue, to help make it easier for us to digest.

Unfortunately, a 3300+ line CSS file will put most people off.

Help us to help you.

[Marqs]

https://codepen.io/MarqsN/pen/yZvbGO

That basically should do it as far as the css goes, but now i’m concerned because the code i wrote here does not look as on the website (Pictures above)

[Shikkediel]

Just to check – is the issue that the black block is larger when hovering? If not, please elaborate some more on it. If it is, try changing this line (to 24px for example):

.nav-menu li a {
 line-height: 1;
}

[Marqs]

This code would’nt fix my problem unfortaly.

My problem basically is that the facebook icon is too small for the navigaiton menu. But if i make the icon bigger the border around the icon also gets bigger which changes the whole navigation menu height, which i don’t want. I therfore need too remove the most part of the “border” around the icon.
I have also set the border around the menu item to 0px which did’nt fix my problem.

[Shikkediel]

That is actually caused by the padding on the a item:

.nav-menu li a {
 padding: 15px 20px;
}

I would suggest removing the line-height rule (or set it to the size of the icon) and reduce the 15px defined there. If you don’t do the former, the block will be unequal in height.

[Marqs]

https://imgur.com/a/Ko4v7vv

I changed the max height on nav to the size of the social media icons (with border) which actually did look nice. But the problem now is that the menu navigation is higher than the actual menu item text if you understand what i mean. And that css you just wrote too me did’nt do nothing special as i can see. I’m pretty new at coding and don’t understand exactly what this code did.
Thank you for fast answering btw!!<3

[Marqs]

/* Sociala Medier Placering */
ul {
list-style: none;
margin: 0;
text-align: left;

}
li {
float: left;
}
li:nth-last-child(1), li:nth-last-child(2) {
float: right;
display: inline-block;
}

Here are the CSS I use to move the social media icons to the right if that would be to any help!

[Shikkediel]

On the image you embedded it seems that you have copied the style that I posted:

.nav-menu li a {
 padding: 15px 20px;
}

This was only pointing out the style that was already being applied however. Try lowering the first value for the issue you mentioned.

Demo of what I thought to be the problem

It’s not easy to understand what you’re trying to do exactly. The subsequent approach you describe is kind of hard to follow without a live example.

[Marqs]

https://imgur.com/a/qXlbh91

This worked! But the problem is that i only want this to happend to the social media icon, not the whole menu?!

[Shikkediel]

In that case you could target them more specifically:

#menu-item-58 a, #menu-item-221 a {
 padding: 10px 20px;
}

Edit – if you want them all to be the same height, while varying the size of the icon, then this is what the amount of padding should be:

(45 - icon size) / 2

45 = font size (15) + 2 x padding (15)

So it’s best to use an icon size that leaves a whole number (half pixels aren’t an option).

[Author]

Posts