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.

Css:

}
.container{box-shadow:
        inset 10px 0px 10px -10px rgba(0,0,0,0.5),
        inset -10px 0px 10px -10px rgba(0,0,0,0.5);
        padding:0px;}
.topnav {
  overflow: hidden;
  background-color: orangered;
  text-align:center;

}
 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;
    text-align:center;
    font-size:25px !important;

color:orangered;

}

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;}

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

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: center;
  }
  .container{background:white;}


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

    p{    padding-left: 15px;}

     .Lrow {

}
p{
    text-align:justify;}

HTML:

<body><div class="container">

  <!--  Header Section-->
<br>

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

            </div>


<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>
            </div>

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



</head>
<body>

<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="https://www.facebook.com/NederlandseTaalAberdeen/" target="_blank"> <i class="fa fa-facebook-square"> </i></a>

    <!--a href="https://www.facebook.com/NederlandseTaalAberdeen/" 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>
  </a>
</div>

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

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

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="#">
          Logo
       </a>
    
    
       <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>
           </li>
         </ul>
    
       </div>
    </nav>
    

    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>
    </div>
    

    https://getbootstrap.com/docs/4.3/utilities/flex/ Please read this documentation carefully. I think you will get your desired result.