1

I'm trying to have my svg logo floating left inside the navbar, then the brand text ("Oishii") next to it (not under) and then my links on the right side. I need them to be all aligned and centered vertically.

I found this question for the logo part but since my logo is svg, I have to put it inside div or else it overflows and I also want text right next to it. I know I can technically just make one svg with the text in it but I'd rather real text since I've heard you should minimize actual text in your logos (selectable, searchable, etc).

.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;
}
<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>

I've put my code on CodePen as well for you guys. Thank you!

Community
  • 1
  • 1
Linh Le Kim
  • 35
  • 1
  • 7

1 Answers1

1

add .logo class to the div wrapping the image, then add this css

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

For the mobile view you will have to use media queries & change the logo & brand name to display: inline-block; & add margin etc

Nick_O
  • 429
  • 5
  • 18
  • Hi Nick, thanks for replying! It still doesn't seem to work after I added the logo class and logo defined as above for css. I updated my codepen with your suggestion and it doesn't budge ( I tested for desktop only for now) – Linh Le Kim Oct 17 '16 at 00:56
  • Still missing the = on codepen, should be – Nick_O Oct 17 '16 at 01:53
  • Oh! Can't believe I missed that. Thanks so much! It works! – Linh Le Kim Oct 18 '16 at 11:55