By Forrest


2020-08-01 11:44:06 8 Comments

I'm trying to move the language switcher and it's items to the right end of the page. I tried ml-auto but it didn't work. When I try to move the language picker using padding-left all of its items appear in the center of the page. Any solutions or advices?Here is how my web-page looks like.

.navbar-nav {
  margin: 0 auto;
}

.nav-link {
  font-weight: 900;
  font-size: 1rem;
  float: right;
}

#top-nav {
  position: absolute;
  z-index: 3;
  width: 100%;
  background-color: transparent !important;
}

#logo {
  width: 100px;
  height: 50px;
  margin-left: 0;
  padding-left: 0;
}

.flag-icon {
  border-radius: 50%;
}

.navbar-light .navbar-toggler {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
  <a class="navbar-brand" id="logo" href="index.html">
    <img src="media/logo_light.svg" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav">
      <li id="main" class="nav-item active ">
        <a class="nav-link text-light" href="#">მთავარი<span class="sr-only">(current)</span></a>
      </li>
      <li id="about-us" class="nav-item">
        <a class="nav-link text-light" href="#">ჩვენ შესახებ</a>
      </li>
      <li id="services" class="nav-item">
        <a class="nav-link text-light" href="#">სერვისები</a>
      </li>
      <li id="contact" class="nav-item">
        <a class="nav-link text-light " href="#">კონტაქტი</a>
      </li>

      <li class="nav navbar-nav nav-item dropdown justify-content-end">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
        <div class="dropdown-menu" aria-labelledby="dropdown09">
          <a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
          <a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
        </div>
      </li>
    </ul>
  </div>
</nav>

2 comments

@Никола Тошић 2020-08-01 13:50:39

Try adding a class to your language switcher, navbar-right, that used to work on Bootstrap 3, not 100% sure on Bootstrap 4

@Vivek Jain 2020-08-01 12:45:51

Do you want something like this?

.navbar-nav {
  margin: 0 auto;
}

.nav-link {
  font-weight: 900;
  font-size: 1rem;
}

#top-nav {
  position: absolute;
  z-index: 3;
  width: 100%;
  background-color: transparent !important;
}

#logo {
  width: 100px;
  height: 50px;
  margin-left: 0;
  padding-left: 0;
}

.flag-icon {
  border-radius: 50%;
}

.navbar-light .navbar-toggler {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.navbar-nav {
  float: right;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
  <a class="navbar-brand" id="logo" href="index.html">
    <img src="media/logo_light.svg" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav">
      <li id="main" class="nav-item active ">
        <a class="nav-link text-light" href="#">მთავარი<span class="sr-only">(current)</span></a>
      </li>
      <li id="about-us" class="nav-item">
        <a class="nav-link text-light" href="#">ჩვენ შესახებ</a>
      </li>
      <li id="services" class="nav-item">
        <a class="nav-link text-light" href="#">სერვისები</a>
      </li>
      <li id="contact" class="nav-item">
        <a class="nav-link text-light " href="#">კონტაქტი</a>
      </li>

      <li class="nav navbar-nav nav-item dropdown justify-content-end">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
        <div class="dropdown-menu" aria-labelledby="dropdown09">
          <a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
          <a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
        </div>
      </li>
    </ul>
  </div>
</nav>

@Forrest 2020-08-01 13:04:44

No sir.I want to move only language picker and leave other nav items centered

Related Questions

Sponsored Content

3 Answered Questions

[SOLVED] Cannot display HTML string

43 Answered Questions

24 Answered Questions

[SOLVED] How do I style a &lt;select&gt; dropdown with only CSS?

18 Answered Questions

[SOLVED] How do I modify the URL without reloading the page?

15 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1134639 View
  • 1711 Score
  • 15 Answer
  • Tags:   javascript jquery html

10 Answered Questions

[SOLVED] Bootstrap NavBar with left, center or right aligned items

12 Answered Questions

[SOLVED] How to Right-align flex item?

  • 2014-03-15 19:56:31
  • Mark Boulder
  • 736227 View
  • 700 Score
  • 12 Answer
  • Tags:   html css flexbox

2 Answered Questions

1 Answered Questions

[SOLVED] Flex justify content end bootstrap nav items

1 Answered Questions

Sponsored Content