- This topic is empty.
-
AuthorPosts
-
February 8, 2019 at 5:59 am #282501
Marqs
ParticipantLinked 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 <3February 8, 2019 at 8:30 am #282510Shikkediel
ParticipantUnfortunately we can’t debug a picture.
February 8, 2019 at 12:17 pm #282530Marqs
ParticipantWould it help if i post the Navigation bar css?
February 8, 2019 at 12:47 pm #282532Shikkediel
ParticipantI think copy pasting the relevant code into Codepen would be most useful.
February 8, 2019 at 12:57 pm #282533Marqs
Participanthttps://codepen.io/MarqsN/pen/yZvbGO
Hope this would work.. :/
February 8, 2019 at 1:49 pm #282534Beverleyh
ParticipantJust 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.
February 8, 2019 at 2:08 pm #282535Marqs
Participanthttps://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)
February 9, 2019 at 5:26 am #282551Shikkediel
ParticipantJust 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; }
February 9, 2019 at 8:10 am #282554Marqs
ParticipantThis 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.February 9, 2019 at 10:03 am #282555Shikkediel
ParticipantThat 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.February 9, 2019 at 10:18 am #282556Marqs
ParticipantI 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!!<3February 9, 2019 at 10:33 am #282557Marqs
Participant/* 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!
February 9, 2019 at 11:18 am #282558Shikkediel
ParticipantOn 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.
February 9, 2019 at 11:53 am #282560Marqs
ParticipantThis worked! But the problem is that i only want this to happend to the social media icon, not the whole menu?!
February 9, 2019 at 12:00 pm #282561Shikkediel
ParticipantIn 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).
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.