semantic-ui-react menu with image throws off alignment

Question

I just started using semantic-ui-react to build a personal site, and when I add a logo to the menu as an Image, it throws off the alignment of the icons on the right. I've been tinkering around with different semantic-ui menu attributes to no avail and I'm not great with css so any help is appreciated. I tried using the fitted= attribute for menu items but it does not help. If I try to wrap the menu items in a div and pad them the entire menu gets thrown off.

The code:

import React, { Component } from 'react'
import { Link, NavLink, withRouter } from 'react-router-dom'
import { Button, Icon, Image, Menu } from 'semantic-ui-react'
//TODO: make paths absolute
import logo from '../../static/images/bridge-logo-trans.png'

const menuItems = [
  {name: "About", link: "/about"},
  {name: "Resume", link: "/resume"},
  {name: "Blog", link: "/blog"},
];

const contactItems = [
  {color: "black", icon: "github", link: "link1"},
  {color: "linkedin", icon: "linkedin", link: "link2"},
  {color: "red", icon: "mail", link: "link3"}
];


class TopMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      activeItem: "",
    }
    this.handleItemClick = this.handleItemClick.bind(this);
    this.handleLogoClick = this.handleLogoClick.bind(this);
  }

  handleItemClick(e, menuItem) {
    this.setState({ activeItem: menuItem.name });
  }

  handleLogoClick(e) {
    this.setState({ activeItem: menuItems[0].name });
  }

  render() {

    return (
      <Menu stackable>
        <Menu.Item>
          <Image as={NavLink} to="/"
                 src={logo} size='small' onClick={this.handleLogoClick}/>
        </Menu.Item>
          {menuItems.map((item) => (
            <Menu.Item
              as={NavLink}
              to={item.link}
              name={item.name}
              active={this.state.activeItem === item.name}
              onClick={this.handleItemClick}
            >
              {item.name}
            </Menu.Item>
          ))}
          <Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>
        </Menu>
    )
  }
}

export default withRouter(TopMenu);

Answer 1

Fixed the issue by adding a 'top' attribute to the right menu, like so:

<Menu.Menu position="right">
            {contactItems.map((item) => (
              <Menu.Item
                style={{top: '0.8em'}}
                as="a"
                href={item.link}
                target="_blank"
              >
                <Button circular color={item.color} icon={item.icon} />
              </Menu.Item>
            ))}
          </Menu.Menu>

Don't ask me why...