I'm struggling to align text with an SVG logo within a mdbootstrap navbar. Despite trying all the solutions provided in this thread position svg, none seem to be working for me. I am currently learning about SVG and not well-versed in using CSS.
My current CSS settings display the logo in the middle of the navbar, but I specifically need it to appear just before the text.
The HTML navbar code:
<!--Main Navigation-->
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark light-blue scrolling-navbar">
<a class="navbar-brand" href="#">
// SVG logo elements here
<strong>
DATUS
</strong></a>
<button class="navbar-toggler" (click)="mobile.toggle()" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" [mdbCollapse]="isCollapsed" #mobile="bs-collapse" id="navbarSupportedContent">
</div>
</nav>
</header>
<!--Main Navigation-->
CSS style:
body {
background: #fff;
}
/* Additional css styles */
For my Angular2+ app, I have a TypeScript file where I utilize some jQuery. Here is the relevant code:
// TypeScript code snippet
import { Component, OnInit } from '@angular/core';
declare var jQuery:any;
declare var $:any;
@Component({
selector: 'app-nav-bar',
templateUrl: './nav-bar.component.html',
styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
constructor() { }
ngOnInit() {
// Function containing jQuery animations
}
}
If anyone can provide guidance on how to inline the SVG with the logo text, it would be greatly appreciated. Thank you for your assistance!