Javascript CSS固定菜单标题和按钮重叠-移动视图

我在移动视图中遇到了一个与标题重叠的按钮问题（在计算机视图中看起来很好）。我正在试图找到一种方法，使按钮和标题都适合标题，可以根据宽度的变化调整大小？如果可能的话

以下是我的标题的CSS：

    header: {
        background: '#C4C4C4',
        height: '100px',
        textAlign: 'center',
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '36px',
        marginBottom: '20px',
        paddingTop: '20px',
        textTransform: 'uppercase',
        position: 'fixed',
        top: 0,
        width: '100%',
    },
    homeButton: {
        boxShadow: '0px 2px 2px #A9A9A9',
        fontFamily: 'PT Sans Caption',
        fontSize: '20px',
        display: 'block',
        position: 'absolute',
        marginLeft: '10px',
    },

以下是计算机视图的屏幕截图： 以下是mobile view的屏幕截图：

---

基本上，我希望“添加运动”标题不会被主页按钮隐藏。任何帮助都将不胜感激

您可以尝试使用Flexbox和媒体查询

header {
  display: flex;
  @media (max-width: [whatever you choose]px) {
     flex-wrap: wrap;
  }

}

“position:absolute”从dom流中删除该项。因此，其他元素的放置就好像绝对项不存在一样。您应该删除该属性。然后使用媒体查询在大屏幕上设置绝对位置。