Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Menu Image, remove border, HELP ASAP

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #282501
    Marqs
    Participant

    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

    #282510
    Shikkediel
    Participant

    Unfortunately we can’t debug a picture.

    #282530
    Marqs
    Participant

    Would it help if i post the Navigation bar css?

    #282532
    Shikkediel
    Participant

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

    #282533
    Marqs
    Participant

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

    Hope this would work.. :/

    #282534
    Beverleyh
    Participant

    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.

    #282535
    Marqs
    Participant

    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)

    #282551
    Shikkediel
    Participant

    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;
    }
    
    #282554
    Marqs
    Participant

    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.

    #282555
    Shikkediel
    Participant

    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.

    #282556
    Marqs
    Participant

    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

    #282557
    Marqs
    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!

    #282558
    Shikkediel
    Participant

    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.

    #282560
    Marqs
    Participant

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

    #282561
    Shikkediel
    Participant

    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).

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘CSS’ is closed to new topics and replies.