Bootstrap Navbar not fully responsive when using rtl languages

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:
image

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


Here is the working Navbar with direction ltr
image

You probably will have to provide a working example or a repo so we can test it. I can’t replicate the issue using what you have posted.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.