Menu
I'm trying to place my SVG logo in a Bootstrap's navbar, but, for some reason, it won't work. I've tried to use <object> (as recommended at CSS Tricks), inline svg and <img>, as you can see in the code below, but nothing worked.
You can save the SVG logo to use with <object> from Bootstrap's site or download here.
#navigation {
background-color: rgba(72, 8, 111, 0.4);
border: 0 none;
margin: 0;
}
.navbar-brand {
padding: 0;
}
.logo {
margin: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>svg on bootstrap's navbar</title>
<!-- CSS
================================================== -->
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Twitter Bootstrap css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<body id="body">
<header id="navigation" class="navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- end responsive nav button -->
<!-- logo png -->
<a class="navbar-brand" href="#First">
<img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
</a>
<!-- end logo png -->
<!-- logo object
<a class="navbar-brand" href="#First">
<object type="image/svg+xml" data="logo.svg" class="logo">
Logo
</object>
</a>
end logo object -->
<!-- logo inline svg
<a class="navbar-brand" href="#First">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
</a>
end logo inline svg -->
<!-- logo img svg
<a class="navbar-brand" href="#First">
<img src="logo.svg" alt="logo">
</a>
end logo img svg -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current"><a href="#First">First</a></li>
<li><a href="#Second">Second</a></li>
<li><a href="#Third">Third</a></li>
<li><a href="#Forth">Forth</a></li>
</ul>
</nav>
<!-- end main nav -->
</div>
</header>
<section>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
</div>
</section>
<!-- jQuery Plugins
================================================== -->
<!-- Main jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Twitter Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>Thanks in advance,
Luiz.
708
navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav" .
.navbar-brand for your company, product, or project name. .navbar-nav for a full-height and lightweight navigation (including support for dropdowns). .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors. .form-inline for any form controls and actions.
The hamburger toggler color is controlled by the two inbuilt classes used for changing the color of the content in the navigation bar: . navbar-light: This class is used to set the color of the navigation bar content to dark. It will change the toggler icon to have darker lines.
You main problem is that you haven't specified a size for the SVG. If the SVG doesn't have width or height attributes, they default to "100%" - that is 100% width (of the parent container).
Below I have just set the width in the CSS and it is now a more reasonable size. You will want to add more styling to get it to sit where you want in the header bar.
#navigation {
background-color: rgba(72, 8, 111, 0.4);
border: 0 none;
margin: 0;
}
.navbar-brand {
padding: 0;
}
.logo {
margin: 0;
}
svg {
width: 50px;
height: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>svg on bootstrap's navbar</title>
<!-- CSS
================================================== -->
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Twitter Bootstrap css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<body id="body">
<header id="navigation" class="navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- end responsive nav button -->
<!-- logo png -->
<a class="navbar-brand" href="#First">
<img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
</a>
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current"><a href="#First">First</a></li>
<li><a href="#Second">Second</a></li>
<li><a href="#Third">Third</a></li>
<li><a href="#Forth">Forth</a></li>
</ul>
</nav>
<!-- end main nav -->
</div>
</header>
<section>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
</div>
</section>
<!-- jQuery Plugins
================================================== -->
<!-- Main jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Twitter Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>As you can see below the tag works, as far as the placement in the html goes. I did have to add some css for sizing. I had to use just some random svg I found to demo it. Where is "logo.svg" being served from in your example?
#navigation {
background-color: rgba(72, 8, 111, 0.4);
border: 0 none;
margin: 0;
}
.navbar-brand {
padding: 0;
}
.logo {
margin: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>svg on bootstrap's navbar</title>
<!-- CSS
================================================== -->
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Twitter Bootstrap css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<body id="body">
<header id="navigation" class="navbar-fixed-top navbar">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars fa-2x"></i>
</button>
<!-- end responsive nav button -->
<!-- logo png -->
<a class="navbar-brand" href="#First">
<img src="http://i.imgur.com/qHjO7J9.png" alt="logo">
</a>
<!-- end logo png -->
<!-- logo object
<a class="navbar-brand" href="#First">
<object type="image/svg+xml" data="logo.svg" class="logo">
Logo
</object>
</a>
end logo object -->
<!-- logo inline svg
<a class="navbar-brand" href="#First">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
</a>
end logo inline svg -->
<!-- logo img svg-->
<a class="navbar-brand" href="#First">
<img style="max-height: 30px;" src="http://s.cdpn.io/3/kiwi.svg">
<!--img src="" alt="logo"-->
</a>
<!--end logo img svg -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current"><a href="#First">First</a></li>
<li><a href="#Second">Second</a></li>
<li><a href="#Third">Third</a></li>
<li><a href="#Forth">Forth</a></li>
</ul>
</nav>
<!-- end main nav -->
</div>
</header>
<!-- REMOVE THIS
<section>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve"><g xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="solid" sodipodi:docname="twitter_bootstrap_logo.svg" inkscape:version="0.48.1 r9760"><path id="bg" fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102V510z"/><g id="B" enable-background="new "><path fill="#FFFFFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2 -8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2 -5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21 -36.5 7.8-59.5 7.8h-164L166.3 133 166.3 133zM228.8 282.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102L228.8 282.5 228.8 282.5zM228.8 439h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z"/></g></g></svg>
</div>
</section>
-->
<!-- jQuery Plugins
================================================== -->
<!-- Main jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Twitter Bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
