Bootstrap导航栏标志高度和菜单分隔线

Question

此刻我正忙着制作一个完全像这样的导航：

现在我做了这个：

如何修复第一张图片上的徽标和分隔符？ 我使用Bootstrap制作网站，并在

中添加了您在下面看到的一些元素

＆＃13;

＆＃13;

0

＆＃13;

html, body{
}


nav{
    background:#fff;
    width:100%;
    padding:0px 30px;
}

.navbar-header{
    display:block; 
    text-align:center;
    height:80px;
}

    .navbar-header img{
        margin:0px auto;
        height:45px;
    }

    a.navbar-brand{
        padding:20px 30px; 
        position: absolute; 
        width:auto; 
        left:0; 
        top:0; 
        text-align:center; 
        margin:auto;
        background-color: red;
    }

    .navbar-collapse.collapse{
        padding:0px; 
        white-space: nowrap;
    }

    .navbar{
        background:#fff;
        width:100%; 
        margin:0px;
        padding-left: 0px;
        padding-right: 15px;
        z-index:10; 
        border: 0px solid transparent;
        border-radius:0px
    }

    .navbar > div{
        margin-left: 0px;
        margin-right: 0px;
    }


    .collapse, .nabar-right{
        margin-right: 0px!important;
    }

        .navbar ul li a{
            background:none; 
            text-transform:uppercase; 
            font-family: 'Open Sans', sans-serif;
            font-weight:300; 
            font-size:14px; 
            color:#000; 
            letter-spacing: 0.035em;
            text-decoration: none;
        }



ul.nav li.open ul.dropdown-menu li{
             padding:0px 0px;
        }

        .navbar ul li a:hover{
            background:#ffffff; 
            color:#22257a!important;
        }

        .navbar ul li a:active{
            background:none;
        }

.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a;  font-weight:700;}
/*-------------------------------------------------*/

.caret {
    color: #000000;
    -webkit-transition: color 0.2s; /* Safari */
    transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    background-color: transparent;
    color: #000000 !important;
}

.dropdown-menu {
    border:1px solid #f1f1f1;
    border-radius: 0;
    box-shadow: none;
    margin-top: -15px;
    padding:0px 0px;
}

.dropdown-menu li {
    padding: 2px 16px 2px 16px;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    background-color: transparent;
}

.dropdown-menu a {
    color: #777777 !important;
}

.dropdown-menu > li > a {
    padding: 8px 14px;
}


div#ccm-highlighter{z-index:1000; min-height:30px;}

hr {
    width: 120px;
    border-top: 4px solid black !important;
}

i {
    color: white;
}
.intro-top {
    width: 100%;
    height: 50px;
    background-color: red;
    float: left;
}
header {
    width: 100%;
    height: 50px;
    background-color: #4d4d4d;
}
header p{
    color:white;
}
header i {
    float:left; 
    padding-right: 10px;
}
a{
    text-decoration: none !important;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

DOE，

对于徽标，您可以尝试使用z-index将其放在网页的前面。

对于“li”，您应该使用填充和边框来获得相同的结果。

如果你想通过观察代码练习，你应该找到一些引导菜单模板。

e.g。 ：http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/