html - 创建响应式导航栏时遇到问题

标签 html css responsive-design navbar nav

无法使导航栏响应。由于所需的设计,我使用了两个 ul,中间有一个图像。由于 li 填充,这会导致断点以大尺寸发生。我想将 Logo 移到左侧并添加一个下拉按钮以显示导航栏选项,同时删除移动显示宽度的顶栏。任何帮助将不胜感激,谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scalisi Skincare</title>
    <link rel="stylesheet" type="text/css" href="build/css/styles.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <header>
        <div class="topbar">
            <a href="#">GIVE $10, GET $10</a>
            <a href="#">FREE SHIPPING AND FREE RETURNS ON ORDERS OVER $50+</a>
            <a class="right" href="#">MY ACCOUNT</a>
        </div>
        <nav>
            <ul class="firstNavSection">
                <li><a href="#">BOB'S CREAM</a></li>
                <li><a href="#">SCALISI SKINCARE</a></li>
                <li><a href="#">TINTED</a></li>
            </ul>
            <a href="#"><img src="assets/logo.PNG" alt="SCALISI"></a>
            <ul class="secondNavSection">
                <li><a href="#">REVIEW</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
                <li><a href="#"><i class="fa fa-shopping-bag fa-2x" aria-hidden="true"></i></a></li>
            </ul>
        </nav>
    </header>

</body>
</html>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

header {
    .topbar {
        display: flex;
        justify-content: space-between;
        background: #7C8DC0;
        padding: 8px 100px;
        a {
        text-decoration: none;
        color: white;
        flex: 1;
        font-family: calibri;
        font-size: 1em;
        }
        .right {
        text-align: right;
        }
    }
    nav {
        border: 1px solid #dae3e5;
        .firstNavSection {
            display: inline-block;
            position: relative;
            top: -10px;
            li {
                display: inline-block;
                list-style: none;
                padding: 0 60px;
                a {
                    font-family: calibri;
                    font-size: 1.5em;
                    text-decoration: none;
                    color: black;
                }
            }
        }
        a {
            img {
                display: inline-block;
                position: relative;
                top: 10px;
            }
        }
        .secondNavSection {
            display: inline-block;
            position: relative;
            top: -10px;
            li{
                display: inline-block;
                list-style: none;
                padding: 0 60px;
                a {
                    font-family: calibri;
                    font-size: 1.5em;
                    text-decoration: none;
                    color: black;
                    i {
                        color: #7C8DC0;
                    }
                }
            }
        }
    }
}

最佳答案

也许您应该遵循 Bootstrap 的样板,并且不要忘记添加它的资源。

关于html - 创建响应式导航栏时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45602851/

相关文章:

html - HTML5 表单验证真的可以访问吗?

css - 浏览器中的连字(开放式字体连字)问题

html - 如果调整浏览器窗口大小,是否可以重新计算使用的 `srcset` 图像?

css - 删除空白和更漂亮的CSS

php - 如何在php网页中获取iframe的颜色?

javascript - 最大化 HTML5 <canvas> 上的粒子渲染速度

css - 在::-webkit-scrollbar上使用过渡?

css - 浏览器X轴滚动条已显示,但已禁用

html - 容器宽度与移动设备上的视口(viewport)宽度不匹配

html - 将 <article> 放在 <li> 中是一个好习惯吗?