I am troubling in navbar positioning.
My navbar items are disappeared after creating the image below. I have tried to adjust the position of elements but still doesn't work:((
I m also trying to making a fixed-top navbar, it doesn't work too:((
I am bad in positioning, hope someone can show me how to solve the problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nav</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.carousel-item{
height:32rem;
background:url(https://picsum.photos/200/300);
color:white;
position:relative;
top:0;
}
.container{
position:absolute;
bottom: 0;
left: 0;
right:0;
padding-bottom: 50px;
}
nav{
min-height: 6vh;
background-color: black;
position: fixed;
top: 0;
overflow: hidden;
width: 100%;
}
nav .navbar-nav{
position:relative;
}
nav .navtoggler .navbar-toggler-icon{
background-color: white;
color:lightgray;
margin-left: 0px;
}
nav .logo{
font-size: 2em;
text-decoration: none;
color:white;
font-weight:bolder;
font-family:Arial, Helvetica, sans-serif;
}
nav .collapse a{
font-weight: bold;
font-size: medium;
color:lightgrey;
text-transform: uppercase;
text-decoration: none;
text-align: center;
word-spacing: 1px;
}
nav .collapse a:hover{
color:hotpink;
}
nav .navbar-nav ul{
list-style: none;
}
nav .nav-link{
display:flex;
width:30%;
letter-spacing: 1px;
word-spacing: 10px;
}
nav .btn{
border:1px solid hotpink;
color:white;
}
nav .btn:hover{
color:hotpink;
}
.main{
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-lightdark my-3">
<div class="container ">
<a class="logo " href="index.html" aria-current="page">
<img src="img/logo.png" alt="Logo" style="width:50px; height:55px;"class="d-inline-block mt-2">Fit Fit Fitness
</a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<!--Related links to other aspects of the website(only for design purpose, not part of the project) -->
<ul class="navbar-nav ms-auto mb-2">
<li class="nav-item">
<a class="nav-link" href="#fp-section2-thelatest">TheLatest</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fp-section3-workout">Workout</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Food&Nutrition</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Athlete&Celebrities</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Apparel&Gear</a>
</li>
</ul>
<button class="btn btn-small" type="submit">Search</button>
</div>
</div>
</nav>
<main role="main">
<div class="carousel-item active">
<div class="container">
<span class="carousel-artCategory">Food & Nutrition › Weight Loss</span>
<h1 class="carousel-artTitle">Four Easy Change Ups You Can Do Today To Burn More Fat</h1>
<p>
<span class="carousel-artCite">By Train
<time datetime="2017-02-14"> 14 Jul, 2022</time>
</span>
</p>
Read
<a></a>
</div>
</div>
</main>
</body>
</html>
I have tried to insert keyword " fixed-top" into the class of nav, but it doesn't working:((
Besides,
When using position:absolute; the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, meaning changing it to position:sticky; or removing the line entirely in the container class should fix your issue.
Related
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
I have a centered heading within a nav which causes the links in the nav to wrap before the nav-bar collapes -
What I'd like to do is just have the links collapse earlier than they currently are. I've looked over all the answers to this question and haven't been able to find an answer that works for what I'm trying to accomplish. Down below is my last test. I thought if I changed the width of the custom header using a media query that would help but it hasn't. As of right now when the links collapse the hamburger icon is also floating to the left of the centered text. I'll worry about that later.
<nav class ="navbar navbar-expand-xl navbar-light bground">
<a class ="navbar-brand" href ="#"> NavBar Testing </a>
<button class ="navbar-toggler" type ="button" data-toggle ="collapse" data-target ="#colNav">
<span class ="navbar-toggler-icon"></span>
</button>
<div class="customHead">
<text>Centered horizontally and vertically</text>
</div>
<div class ="collapse navbar-collapse" id ="colNav">
<ul class ="navbar-nav ml-auto">
<li class ="nav-item">
<a class ="nav-link" href="#"> Services </a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> About Us</a>
</li>
<li class ="nav-item">
<a class ="nav-link" href ="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
.navbar-collapse {
background-color: red;
float: right;
width: 25%;
}
.navbar-nav, .nav-link{
background-color: yellow;
color: red !important;
}
.customHead {
width: 100%;
position: relative;
background: red;
}
text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -130%);
background: orange;
margin-top: 10px;
}
#media only screen and (max-width: 1200px) {
.customHead {
width: 80%;
}
.navbar-toggler {
background-color: red;
float: right;
}
}
There is other CSS than what's displayed here so it's tough to know exactly. But one solve could be:
<!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, initial-scale=1.0" />
<title>Document</title>
<style>
.flex {
flex: 1;
display: flex;
}
.horizontal-center {
justify-content: center;
}
.horizontal-end {
justify-content: flex-end;
}
.vertical-center {
align-items: center;
}
.navbar-nav {
display: flex;
}
.nav-link{
background-color: yellow;
color: red !important;
margin-left: 10px;
}
li {
list-style: none;
}
</style>
</head>
<body>
<nav class="flex">
<div class="flex vertical-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"> NavBar Testing </a>
</div>
<div class="flex vertical-center horizontal-center">
<text>Centered horizontally and vertically</text>
</div>
<div class="flex horizontal-end vertical-center">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
</body>
</html>
This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 1 year ago.
I am trying to make my navigation bar responsive. When I resize my browser to test, the nav bar does collapse but the button is not visible. I tried to set the nav bar background as bg-dark but the button will still be invisible.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Cuppela</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div id="nav-menu">
<nav id="main-nav" class="navbar navbar-expand-md fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid" id="top-main">
<div id="top_text">
<h1>Cuppela Made With Sugar</h1>
<p style="font-size: x-large;">Delicious Homemade Cakes</p>
</div>
</div>
<div id="best-sellers "class="container">
<h2>Best Sellers</h2>
<hr>
<div id="best-seller-cakes" class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/chocolate_cake.jpg">
<h4>Good<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/red_velvet_cake.jpeg">
<h4>Awesome<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/strawberry_cake.jpg">
<h4>Great<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<img src="images/cake_seven.jpg">
<h4>Delicious<br>Cakes</h4>
<p>Delicious Cake with Awesome Goodness</p>
</div>
</div>
</div>
</body>
</html>
This is my css:
body{
margin: 0px;
}
li a:hover {
background-color: #ff9900;
border-radius: 10px;
}
li a{
color: white !important;
}
.nav-link{
padding: 0 0 .2rem
}
#top-main{
background-image: url(../images/cake_six_two.jpg);
height: 100vh;
}
#nav-menu{
font-size: medium;
position: relative;
}
#top_text{
color: white;
text-align: center;
position: relative;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
h1{
font-size: 500%;
text-align: center;
}
h2{
text-align: center;
}
#best-sellers{
text-align: center;
}
#best-seller-cakes{
text-align: center;
}
h4
{
font-size: x-large;
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}
Edit: Removed webpage link as link no longer exists
Resulting change - The issue is in your HTML.
Add this two classes to the <nav> </nav> element in your HTML more details cna be found on the bootsrap page.
navbar-dark bg-dark
or the result will be -
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
by changing these two classes or modify their properties you can change the behavior. And don't override the bootstrap classes, add your own to override the CSS properties you need to change
Add this Class navbar-dark bg-transparent
<nav id="main-nav" class="navbar navbar-expand-md fixed-top navbar-dark bg-transparent">
your issue is on the a css file called_transitions.scss
I have looked at your code and I found out you have a css rule that will set the navbar's display property to none when it goes below 750 width-pixels
Try looking at this file and either edit it to just compress your navbar or try removing the code
on the code, this is the part that makes your navbar not visible when scaling
.collapse {
&:not(.show) {
display: none;
}
}
You actually apply transparent background and border css on Collapse button, this is the reason why collapse button not visible.
Goto line no 109 on _navbar.scss file and you will find below CSS.
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;
}
Just replace background-color: transparent; to background-color: white;
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid white;
border-radius: .25rem;
}
I hope it'll resolve your issue. Thank You
I'm using Bootstrap for my navigation bar, and somehow I keep getting whitespace on the right side of the logo image. My navigation code looks like this:
.navbar {
background-color: white;
opacity: 80%;
font-size: 0.8em;
}
.nav-link a {
color: black;
}
.nav-item img {
width: 110px;
margin-top: 8px;
margin-left: 10px;
margin-right: 20px;
}
.nav-item a {
color: black;
}
.navButtons {
background-color: white;
color: black;
padding: 6px;
font-size: 12px;
}
.navButtons:hover {
color: black;
text-decoration: none;
}
<style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</style>
<nav class="navbar fixed-top navbar-expand-sm navbar-light">
<a class="navbar-brand" href="index.html" style="margin:0;">
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 50%;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="button navButtons" href="about.html"> Biography <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="interiorDesigns.html"> Interior Design </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="arts.html"> Arts </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="blogs.html"> Blogs </a>
</li>
<li class="nav-item">
<a class="button navButtons" href="contact.html"> Contact </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<div class="form-group mb-4">
<input type="search" placeholder="Search" class="form-control form-control-underlined">
</div>
</form>
</div>
</nav>
And this is what my logo looks like, the yellow part is where I want to get rid of. I tried changing the padding, margin, and width, but none worked.:
In your Example the Anchor tag is is a block element/parent container of the image.
Apply width and padding-right(if required) to the navbar-brand.
Then instead of adding 50% width make it 100% to the img tag inside.
This will fix your issue.
Example Code (last two lines) in CSS then tag:
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
width: 300px;
padding-right: 50px;
}
<img src="https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now" alt="logo" style="width: 100%;">
I'm having difficulty moving items on my Navbar to either end. At the moment I have this:
I would like to move the flag image next to the toggler button, it is only there when the breakpoint reaches the Navbar button size, 992px.
I'm sure the Bootstrap Stylesheet is aligning it using justify-content: space-between; I have tried using align-self: flex-end !important; on both flag and button as well as using justify-content-end
Codepen - https://codepen.io/jvern22/pen/gZjJBN
My Nav code;
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
</ul>
</div>
</div>
</nav>
You can either wrap the flag and the navbar button within a div as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<div>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
Or you can just change the justify-content property of the parent div from space-between to flex-end and add a margin-right: auto to the first navbar-brand as shown in this CodePen or in the Code Snippet below:
html {
height:100%;
box-sizing: border-box;
}
body {
min-height:100%;
padding:0;
margin:0;
position:relative;
font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
text-align: center;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
margin-right: auto;
}
.bg-dark {
background: #000 !important;
color: #fff;
}
.bg-dark a {
color: #aaa;
}
.bg-dark a:hover, .bg-dark a:focus {
color: #fff;
}
.navbar-nav>li>a {
line-height: 20px;
padding-right: 12px!important;
padding-left: 12px!important;
padding-top: 10px!important;
padding-bottom: 10px!important;
}
.navbar-flag {
height: 20px;
}
#media (min-width: 992px) and (max-width: 2200px){
.navbar-flag {
display: none;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
<div class="container container-navbar">
<a class="navbar-brand" href="index.php">Website title</a>
<a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="navbar-nav justify-content-end">
<li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=rates"><?php echo $lang['nav_rates']; ?></a></li>
<li class="nav-item"><a class="nav-link" href="?page=contactus"><?php echo $lang['nav_contact']; ?></a></li>
</ul>
</div>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The easiest solution here is to just expand the first flex item so that it pushes all the other items to the right. This can be easily done by adding the following to your css:
.navbar-brand:first {
flex-grow: 1;
}