I have created a project for my university where i have to provide multiple languages for one page and also languages that have the direction rtl like arabic or hebrew.
The Navbar is working fine on all ltr languages, but whenever i switch to rtl it seems the Navbar is cut off.
I cannot figure out what causes this problems. Can you help?
Not working:
HTML:
<header>
<nav class="navbar navbar-expand-lg fixed-top bg-body-tertiary">
<div class="container-fluid">
<img src="/logo.jpg" alt="Logo" width="60" height="30" class="d-inline-block align-text-top"></img>
<a class="navbar-brand" href={`/${lang}/home`}>Global CO₂ Tracker</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav navbar-expand-sm mx-auto navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item"><a class="nav-link" href={`/${lang}/home`}>{t('nav.home')}</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="/about" role="button" data-bs-toggle="dropdown" aria-expanded="false">{t('nav.about')}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href={`/${lang}/news`}>{t('nav.news')}</a></li>
<li><a class="dropdown-item" href={`/${lang}/blog`}>{t('nav.blog')}</a></li>
<li><a class="dropdown-item" href={`/${lang}/faq`}>{t('nav.faq')}</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="https://www.facebook.com/GcO2T">Facebook</a></li>
<li><a class="dropdown-item" href="https://www.instagram.com/GcO2T">Instagram</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="/data" role="button" data-bs-toggle="dropdown" aria-expanded="false">{t('nav.data')}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href={`/${lang}/climatechange`}>{t('nav.climate')}</a></li>
<li><a class="dropdown-item" href={`/${lang}/carbonemissions`}>{t('nav.carbon')}</a></li>
<li><a class="dropdown-item" href={`/${lang}/effects`}>{t('nav.effects')}</a></li>
<li><a class="dropdown-item" href={`/${lang}/statistics`}>{t('nav.statistics')}</a></li>
</ul>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="/language" role="button" data-bs-toggle="dropdown">{t('nav.lang')}</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="/en/home">English</a></li>
<li><a class="dropdown-item" href="/de/home">Deutsch</a></li>
<li><a class="dropdown-item" href="/fr/home">Français</a></li>
<li><a class="dropdown-item" href="/es/home">Español</a></li>
<li><a class="dropdown-item" href="/ru/home">Русский</a></li>
<li><a class="dropdown-item" href="/he/home">עברית</a></li>
<li><a class="dropdown-item" href="/ar/home">عربي</a></li>
</ul>
</li>
</li>
</ul>
<form class="form d-flex">
<input class="form-control" type="search" name="search" id="search" placeholder={t('nav.plholder')} ></input>
<button class="btn btn-outline-success" type="submit">{t('nav.searchbutton')}</button>
</form>
</div>
</div>
</nav>
</header>
CSS
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #8abfd2e0;
padding-top: 0px;
padding-inline-start: 0px;
padding-inline-end: 0px;
}
h1 {
color:#0e4569;
padding-top: 6.0rem;
}
.bg-body-tertiary {
background-color: #0e4569 !important;
}
header nav div a.navbar-brand {
--bs-navbar-brand-color: #fff;
--bs-navbar-brand-hover-color: #fff;
font-size: 25px;
}
.nav-link.active {
color: #fff !important;
}
.nav-link {
color: #fff;
font-size: 20px;
--bs-navbar-active-color: #5ad0f8;
--bs-navbar-hover-color: #5ad0f8;
}
.nav-link:hover {
color: #5ad0f8;
}
.nav-item {
padding: 15px;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler {
border: 2px solid;
color: #fff;
}
.btn-outline-light {
border: 2px solid;
--bs-btn-hover-color: #0e4569;
}
.dropdown-menu {
background-color: #0e4569;
text-align: start; /
--bs-dropdown-link-color: #fff;
--bs-dropdown-link-hover-color: #0e4569;
--bs-dropdown-border-color: #fff;
--bs-dropdown-divider-bg: #fff;
}
.btn-outline-success {
--bs-btn-color: #fff;
--bs-btn-border-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #5ad0f8;
--bs-btn-hover-border-color: #5ad0f8;
--bs-btn-active-bg: #5ad0f8;
--bs-btn-active-border-color: #5ad0f8;
--bs-btn-disabled-color: #5ad0f8;
--bs-btn-disabled-border-color: #5ad0f8; }
@media screen and (max-width: 400px) {
.nav-link { font-size: 15px; }
.dropdown-item { font-size: 15px; }
header nav div a.navbar-brand { display: none; }
}
