Question

我试图让我的svg徽标漂浮在导航栏内，然后是旁边的品牌文字（＆＃34; Oishii＆＃34;）（不在下面），然后我的链接在右侧。我需要它们全部对齐并垂直居中。

我找到this question作为徽标部分，但由于我的徽标是svg，我必须将它放在div中，否则它会溢出，我也希望它旁边有文字。我知道我可以在技术上制作一个带有文字的svg，但我更喜欢真实的文字，因为我听说你应该最小化你的标识中的实际文本（可选择，可搜索等）。

＆＃13;

.navbar {
    border: 0;
    z-index: 9999;
    letter-spacing: 4px;

}

.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}
.navbar .nav > li > a {
  line-height: 50px;
}

.navbar-header h1 {
    letter-spacing: 1px;
    color: black !important;
    font-family: 'Lobster Two', cursive;
}

.navbar li a, .navbar {
    color: black !important;
    font-size: 12px;
    transition: all 0.6s 0s;
}

.navbar-toggle {
    background-color: transparent !important;
    border: 0;
}

.navbar-nav li a:hover, .navbar-nav li.active a {
    color: red !important;
}

＆＃13;

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
            </button>
            <div class"navbar-left"><img src="oishiilogo.svg"></div>
            <h1 class="brand brand-name navbar-left">Oishii</h1>
        </div>
        <div class="collapse navbar-collapse navbar-right" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#intro">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Menu</a></li>
                <li><a href="#contact">Reserve</a></li>
            </ul>
        </div>
    </div>
</nav>

＆＃13;

我也为我们提供了代码on CodePen。谢谢！

Answer 1

将.logo类添加到包装图像的div中，然后添加此css

.logo {
    display: block;
    height: auto;
    width: 52px;
    padding-top: 5px;
    margin-right: 15px;
}

对于移动视图，您必须使用媒体查询＆amp;更改徽标＆amp;品牌名称为display: inline-block;＆amp;增加保证金等

在Bootstrap导航栏中安装带有品牌文字的SVG徽标

1 个答案: