After successfully implementing a responsive navigation bar using HTML and CSS, I noticed an issue with the flag images within my navigation bar. While the text is responsive, the flag images are not behaving as expected. Can anyone provide assistance with this? Thank you. My goal is to position the flag images before the navbar-toggler-icon rather than after it. Below is the code snippet for reference. Appreciate any help offered.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Logo Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='jquery.particleground.js'></script>
<script type='text/javascript' src='demo.js'></script>
<!-- Custom styles for this template -->
<style type="text/css">
.logo span {
height: 50%;
line-height: 50px;
float: left;
color: #fed136;
font-size:30px;font-weight:700;letter-spacing:0.1em;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
}
.logo {
line-height: 50px;
float: left;
color: #fff;
font-size:20px;
font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
font-weight:700;
letter-spacing:0.1em;
}
body {
padding-top: 54px;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
@media (max-width: 578px){
.logo {
font-size: 10px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<div class="logo"><span>FASHION</span><br>CELEBRATE OUR FASHION</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="#" class="active nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">INFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CART</a>
</li>
</ul>
</div>
<div class="langswitch"><a href=""><img class="flag-australia"src="australia.svg" width="30px;"></a>
<a href=""><img src="south-korea.svg" class="flag-korea"width="30px;"></a>
</div>
</div>
</nav>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The result obtained so far can be viewed https://i.sstatic.net/59o5O.png.