How do I get logo and header text above navigation in bootstrap?

I am trying to make a website which has the logo on the left and the text in the middle above the navigation.

I have tried going through the Bootstrap documentation, but I wasn't able to get it to work properly. I was able to get the logo and text above the navigation, but when resizing the window (to test it on a mobile), the header would overlap with the page, thus making it impossible to read the header.


        inset 10px 0px 10px -10px rgba(0,0,0,0.5),
        inset -10px 0px 10px -10px rgba(0,0,0,0.5);
.topnav {
  overflow: hidden;
  background-color: orangered;

 img.flag {max-width:30px; max-height:30px; vertical-align: middle; display:inline-block ; list-style-position: inside;}
.topnav a {

  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 20px;
    font-family: MuseoSans-500;
    font-weight: normal;
    font-style: normal;


.fa {font-size:20px !important;}
.topnav a:hover {
    color: black;

h1 {    font-family: MuseoSans-500;
    font-weight: normal;
    font-style: normal;
    font-size:25px !important;



h2 { font-size:25px;    font-family: MuseoSans-500 !important;
    font-weight: normal;
    font-style: normal;
clear:both; text-align:center;  color: orangered;

.active {
  background-color: #4CAF50;
  color: white;

.topnav .icon {
  display: none;

h2{margin-bottom:0px !important;}

 border:#01009C 1px  solid; display: block; margin: 0 auto; vertical-align:middle !important;   }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;

b{font-family: MuseoSans-500;color:orangered; padding-left:15px !important;}
    .img-fluid {
      max-width: 100%;
      height: auto;

    p{    padding-left: 15px;}

     .Lrow {



<body><div class="container">

  <!--  Header Section-->

  <div class="col-xs-3 col-md-2" style="padding:0px;">


<nav class="navbar navbar justify-content-center">
    <div class="navbar-header">
        <div class="navbar-brand">
                <img class="img-fluid" src="/images/NTA-01.svg" width="150px">
            <h1 class="navbar-text primary">Nederlandse Taal Aberdeen</h1>


              <div class="clearfix">&nbsp;</div>


<div class="topnav" id="myTopnav">
            <a href="index.php<?php echo $link;?>"><?php echo $homepage;?></a>
            <a href="ntc.php<?php echo $link;?>"><?php echo $NTC;?></a>
            <a href="club.php<?php echo $link;?>"><?php echo $Club;?></a>
            <a href="tuition.php<?php echo $link;?>"><?php echo $Tuition; ?></a>
            <a href="team.php<?php echo $link;?>"><?php echo $Team; ?></a>
            <a href="faq.php<?php echo $link;?>"><?php echo $Faq; ?></a>

            <a href="contact.php<?php echo $link;?>"><?php echo $Contact; ?></a></li>
                        <a href="" target="_blank"> <i class="fa fa-facebook-square"> </i></a>

    <!--a href="" target="_blank"> Facebook</a> -->
            <a href="links.php<?php echo $link;?>"><?php echo $Links; ?></a></li>
            <a href="<?php echo $languagelink;?>"><img class="flag" src="<?php echo $flagname; ?>">  </a>
              <a href="javascript:void(0);" class="icon" onclick="myFunction()">

    <i class="fa fa-bars"></i>

<!-- <div style="padding-left:16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div> -->

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";

1 answer

  • answered 2019-08-14 18:20 Mr. Perfectionist

    First Solution:

    <nav class="navbar navbar-expand-sm fixed-top">
       <a class="navbar-brand" href="#">
       <div class="collapse navbar-collapse" id="navbarsExample03">
        <p class="w-100 text-center">Text</p>
        <ul class="navbar-nav mr-auto">
           <li class="nav-item active">
             <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

    Second Solution: You can use flex:

    <div class="d-flex justify-content-between bg-secondary mb-3">
        <div class="p-2 bg-info">Flex item 1</div>
        <div class="p-2 bg-warning">Flex item 2</div>
        <div class="p-2 bg-primary">Flex item 3</div>
 Please read this documentation carefully. I think you will get your desired result.