Question

我对HTML＆amp; CSS。我已经开始定制一个Bootstrap模板，并希望在图标栏旁边添加一个徽标，但是这个导航栏似乎比我玩过的基本Bootstrap导航栏更加棘手。我真的很感激，如果有人可以通过指示我在代码中查看的位置或通过提供一个或两个示例来帮助我。这是我定制的模板的link。我想在切换按钮旁边放置一个图像，例如this和“菜单”。

HTML：

<nav id="navigation" class="navbar scrollspy">

    <!-- .container -->
    <div class="container">

        <div class="navbar-brand">
            <a href="index.html"><img src="images/logo.png" alt="Logo" /></a> <!-- site logo -->
        </div>

        <ul class="nav navbar-nav">
            <li><a href="#header" class="smooth-scroll">Home</a></li>
            <li><a href="#about" class="smooth-scroll">About</a></li>
            <li><a href="#features" class="smooth-scroll">Features</a></li>
            <li><a href="#portfolios" class="smooth-scroll">Portfolios</a></li>
            <li><a href="#whyus" class="smooth-scroll">Why Us?</a></li>
            <li><a href="page.html">Page</a></li>
            <li class="menu-btn"><a href="page_contact.html">Contact</a></li>
        </ul>

    </div>
    <!-- .container end -->

</nav>

CSS：

/* Navigation Mobile */
#navigation_mobile {
    display:none;
    font-size:14px;
    line-height:18px;
    text-align:center;
    font-weight:600;
    text-transform:uppercase;
}
#navigation_mobile .nav-menu-links {
    display:none;
    background-color:#2a2a2a;
}
#navigation_mobile ul {
    padding:30px 100px;
    margin:0px;
}
#navigation_mobile ul li {
    list-style-type:none;
    padding:11px 0px;
}
#navigation_mobile ul li a {
    display:block;
    color:#a9a9a9;
}
#navigation_mobile ul li a:hover { color:#FFF; }
#navigation_mobile .nav-menu-button {
    background-color:#202020;
    padding:15px 0px 14px;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle {
    color:#a9a9a9 !important;
    font-size:24px;
    line-height:1;
    background:none;
    padding:0px;
    border:0px;
    border-radius:0px;
    -webkit-transition:color .2s ease;
    transition:color .2s ease;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { color:#FFF !important; }

#header .navbar { display:none;}
#navigation_mobile { display:block; }

Answer 1

您只需将文字添加到图片即可。并通过以下方式定义图像中的文本：

<img src="logo.png" alt="My Logo">

在导航栏上的“切换图标”旁边添加徽标

1 个答案: