html - 尝试做一个有背景的固定菜单

Question

嘿，我想为右边的菜单和左边的标题创建一个白色背景，就像在这个网站上一样 http://weblendit.co.uk/ ，当您向下滚动时，它也保持在顶部(不一定要像这个那样改变它的大小)

我的页眉在 nav 和 h1 之后还包含一张大图片，当我设置背景颜色时，它只会在文本后面，但我希望它是全尺寸的。

我还尝试为 .fixed 设置宽度和高度，但是导航向左浮动并且 h1 消失了吗？

.fixed{
    position: fixed;
    top: 0;
    background-color: white;
}

h1{
    padding: 1% 0 0 4%;
    text-transform: uppercase;
    float: left;
    left: 0;
}

nav{
    float: right;
    padding-right: 12%;
    padding-top: 3%;
    width: auto;
    right: 0;
}

#menu ul{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

#menu li{ 
   margin: 0 5%;
   float: left;
}

#menu li a {
    text-decoration: none;
    color: #666666;
    font-size: 25px;
    font-weight: bold;
    display: block;
    float: left;
}

<header class="header">
    <h1 class="fixed">My page</h1>
    <nav class="fixed" id="menu">
    	<ul>
    		<li><a href="index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
    		<li><a href="#contact">Contact</a></li>
    	</ul>
    </nav>
  ....

Answer 1

最好修复 header 元素周围的容器，而不是其中的每个元素。那么您就不再需要 fixed 类了。

<header class="header">
    <h1>My page</h1>
    <nav id="menu">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="work/index.html">Portfolio</a></li>
            <li><a href="travel/index.html">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

CSS

.header {
    position: fixed;
    background-color: red;
    top: 0px;
    left: 0px;
    width: 100%;
}