As a newcomer to the Bootstrap 4 framework, I find myself a bit stuck despite going through all the documentation and existing B4 questions on platforms like StackOverFlow.
The issue I am facing is with my navigation bar. I have inserted an SVG logo with dimensions of 50px both in height and width. This has unexpectedly increased the navbar's height without me making any CSS adjustments specifically for it.
Below is the HTML code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>@yield('title')</title>
<link rel="import" href="elements.html">
<link rel="stylesheet" href="/styles/app.css">
</head>
<body>
<header class="navbar navbar-light navbar-fixed-top bd-faded">
<div class="clearfix hidden-sm-up">
<button class="navbar-toggler pull-right" data-toggle="collapse" data-target="#navbar">
☰
</button>
<a href="/" class="navbar-brand">
<img src="/images/brand.svg" alt="Logo">
<span>Bootstrap</span>
</a>
</div>
<div class="collapse navbar-toggleable-xs" id="navbar">
<a href="/" class="navbar-brand">
<img src="/images/brand.svg" alt="Logo">
<span>Bootstrap</span>
</a>
<nav class="nav navbar-nav">
<div class="nav-item nav-link"><a href="#">Link 1</a></div>
<div class="nav-item nav-link"><a href="#">Link 2</a></div>
<div class="nav-item nav-link"><a href="#">Link 3</a></div>
</nav>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="/scripts/vendor.js"></script>
<script src="/scripts/bootstrap.js"></script>
<script src="/scripts/app.js"></script>
<script src="/components/webcomponentsjs/webcomponents.js"></script>
</body>
</html>
Also provided is my Custom CSS which attempts to handle this particular issue:
.navbar-brand {
font-size: 22px;
img {
display: inline-block;
margin-right: 8px;
width: 50px;
height: 50px;
}
}
I am seeking assistance on how to vertically align the navigation links (link1, link2, & link3) with the title "Bootstrap". Any help would be greatly appreciated.
Thank you in advance!