Results 1 to 1 of 1

Thread: Navbar-Brand with Logo

  1. #1
    Junior Member
    Join Date
    Nov 2017

    Navbar-Brand with Logo

    Hello Forum,

    The purpose of my post is that I need help switching out a text logo with an image logo. I'm using a purchased Bootstrap template but struggling to incorporate my logo into the navBar. I searched the forums and found this post.

    I don't think my problem is the same as above, but I just don't know. My goal is to replace the Morki font logo with my image logo but slightly larger in width and height. However, I want to keep the alignment of the logo the same meaning, my logo will be on the same center line as Home, Services, Features, etc. Just as Morki is now.

    Below is the code that I think needs to be tweaked to properly switch out Morki with my image logo. I don't know how to write this css and/or html or if I'm even looking in the right direction.

    I can use some help, direction and/or examples so that I can properly incorporate my image logo. Any help is greatly appreciated.

    Some code for reference

    <header id="home">
    <nav class="navbar navbar-default" id="main-nav">
    <div class="container">
    <div class="row">
    <div class="col-sm-12">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-morki">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <a class="navbar-brand" href="home-multipage.html"><img src="images/raygun.png" width="250px" height="69px"</a>

    header nav.navbar .navbar-header a.navbar-brand {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    Attached Images Attached Images
    Last edited by BillyRaygun; 11-02-2017 at 03:20 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts