All geek questions in one place

Bootstrap 4: vertical alignment of navigation links when logo increases Navbar height

I'm new to Bootstrap 4 framework, but even after reading all the documentation and all the existing B4 questions on StackOverFlow, I'm still a bit stuck.

In my navigation bar, I inserted an SVG logo with a height and width of 50 pixels. This automatically makes the navigation bar taller. I have not adjusted the CSS for this, it is just a logo that makes the height of the navigator increase.

Here is my HTML:

<!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">
                    &#9776;
                </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>

Here is my custom CSS:

.navbar-brand {
    font-size: 22px;
    img {
        display: inline-block;
        margin-right: 8px;
        width: 50px;
        height: 50px;
    }
}

I would like links to links that are link1, link2 and link3 to be vertically aligned with the header, which is Bootstrap.

Thank you at Advance

+4
2

, . .navbar-brand.

CSS:

.navbar-brand {
  padding: 0;
}
.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 50px;
  line-height: 50px;
}

CODEPEN

+4

.

 <header class="navbar navbar-default navbar-top">
                <div class="container">
                    <div class="navbar-header">
                        <!-- Stat Toggle Nav Link For Mobiles -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <i class="fa fa-bars"></i>
                        </button>
                        <!-- End Toggle Nav Link For Mobiles -->
                        <a class="navbar-brand" href="#">
                            <h3>Bootstrap</h3>
                        </a>
                    </div>
                    <div class="navbar-collapse collapse navbar-right">
                       <!-- Start Navigation List -->
                        <ul class="nav navbar-nav">
                            <li> <a href="#">Link 1</a> </li>
                            <li><a href="#">Link 2</a> </li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                        <!-- End Navigation List -->
                    </div>
                </div>
      </header>
-1

Source: https://habr.com/ru/post/1628985/

More articles:


All Articles