Question

三个问题合而为一，我希望没问题！

首先，我真的想知道在哪里以及如何调整下面的代码以将导航栏固定到顶部（因此当您向下滚动时它保持在顶部）。

其次，如何使用徽标替换“主页”选项卡（保留在导航栏左侧并适合导航栏）？

最后，我想摆脱标题，而不会影响网站响应的完整性。简单的解决方案似乎是添加“隐藏”，因此它将成为。问题是，然后保留导航栏的文本对齐。还有其他方法吗？主要目的是将导航栏固定到顶部。在此先感谢：）。

HTML

<body>
    <div id="page-wrapper">

        <!-- Header -->
            <div id="header">

                <!-- Logo -->
                    <h1><a href="index.html" id="logo">Company Name</a></h1>

                <!-- Nav -->
                    <nav id="nav">
                        <ul>
                            <li class="current"><a href="index.html">Home</a></li>
                            <li>
                                <a href="#">Dropdown</a>
                                <ul>
                                    <li><a href="#">Lorem dolor</a></li>
                                    <li><a href="#">Magna phasellus</a></li>
                                    <li><a href="#">Etiam sed tempus</a></li>
                                    <li>
                                        <a href="#">Submenu</a>
                                        <ul>
                                            <li><a href="#">Lorem dolor</a></li>
                                            <li><a href="#">Phasellus magna</a></li>
                                            <li><a href="#">Magna phasellus</a></li>
                                            <li><a href="#">Etiam nisl</a></li>
                                            <li><a href="#">Veroeros feugiat</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">Veroeros feugiat</a></li>
                                </ul>
                            </li>
                            <li><a href="left-sidebar.html">Left Sidebar</a></li>
                            <li><a href="right-sidebar.html">Right Sidebar</a></li>
                            <li><a href="two-sidebar.html">Two Sidebar</a></li>
                            <li><a href="no-sidebar.html">No Sidebar</a></li>
                        </ul>
                    </nav>

            </div>

CSS

/* Header */

#header {
    text-align: center;
    padding: 0 0 0 0;
    background-color: #fff;
    background-repeat: no-repeat,                   no-repeat,                  repeat;
}

    #header h1 {
        padding: 0 0 0 0;
        margin: 0;
    }

        #header h1 a {
            font-size: 1.5em;
            letter-spacing: -0.025em;
            border: 0;
        }

#nav {
    text-align: center;
    cursor: default;
    background-color: #FFFFFF;
    padding: 0;
}

    #nav:after {
        content: '';
        display: block;
        width: 100%;
        height: 0.75em;
        background-color: #37c0fb;
        background-image: url("images/bg01.png");
    }

    #nav > ul {
        margin: 0;
    }

        #nav > ul > li {
            position: relative;
            display: inline-block;
            margin-left: 1em;
        }

            #nav > ul > li a {
                color: #c0c0c0;
                text-decoration: none;
                border: 0;
                display: block;
                padding: 1.5em 0.5em 1.35em 0.5em;
            }

            #nav > ul > li:first-child {
                margin-left: 0;
            }

            #nav > ul > li:hover a {
                color: #fff;
            }

            #nav > ul > li.current {
                font-weight: 600;
            }

                #nav > ul > li.current:before {
                    -moz-transform: rotateZ(45deg);
                    -webkit-transform: rotateZ(45deg);
                    -ms-transform: rotateZ(45deg);
                    transform: rotateZ(45deg);
                    width: 0.75em;
                    height: 0.75em;
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: -0.5em;
                    left: 50%;
                    margin-left: -0.375em;
                    background-color: #37c0fb;
                }

                #nav > ul > li.current a {
                    color: #c0c0c0;
                }

            #nav > ul > li.active a {
                color: #fff;
            }

            #nav > ul > li.active.current:before {
                opacity: 0;
            }

            #nav > ul > li > ul {
                display: none;
            }

#page-wrapper {
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-transition: -moz-transform 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease;
            transition: transform 0.5s ease;
            padding-bottom: 1px;
            padding-top: 44px;
        }

 body.navPanel-visible #page-wrapper {
            -moz-transform: translateX(275px);
            -webkit-transform: translateX(275px);
            -ms-transform: translateX(275px);
            transform: translateX(275px);
        }

可在以下位置查看当前网站的实时版本： http://heliossol.000webhostapp.com

Answer 1

将css导航位置设置为绝对或固定，并将其中一个网址更改为图像元素

固定导航栏（在顶部），摆脱标题并用徽标

1 个答案: