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

Question

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

我的header也是在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 class 了。

<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%;
}

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

Trying to make a fixed menu with a background

html

css

menu

header

fixed