One Menu Item is Lower than the Others

  • Hi,
    In the main menu. the item “NURSE CALL SYSTEMS” is one pixel lower than the other menu items. Can’t find the cause.

    thanks,
    Mark

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello Mark,

    I am not sure why exactly, but it looks like it is related to the pseudo after element on the item… which is weird because Chrome’s inspector shows it as being a height of 16 pixels. But, removing the pseudo element did make the height uniform. Specifying the font-size on the ::after element to a smaller size (15 pixels) also fixed the issue. Toggling the font-family on the ::after element from Font Awesome also fixes it… so I feel like it has something to do with how the Font Awesome is being rendered in this case. I found something similar in this discussion on Stack Overflow:

    https://stackoverflow.com/questions/53453906/font-icons-1-or-2-pixels-too-high

    I hope this is helpful.

    Scott

    Oops! I didn’t see stirrell42’s detailed explanation.

    I’m leaving my response below just for the screenshots.

    Try:

    .x-navbar .desktop .x-nav li>a>span:after {
font-size: 15px;
}

    Before and After screenshots:

    Thread Starter compclar

    (@compclar)

    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘One Menu Item is Lower than the Others’ is closed to new replies.