0

I designed a nav-bar having nav-items, drop-down button, the drop-down-menu items are not showing on display this is how it looks like

enter image description here

I have used margin-left to move sign-up nav-item thinking it'll move out but its not responding what other solutions can be proferred?? my code is...

<div class="collapse navbar-collapse" id="navbarSupportedContent">       
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current) 
   </span></a> 
</li>
<li class="nav-item active">
<a class="nav-link" href="#">About Us <span class="sr-only"> 
(current)</span></a>
</li> 
<li class="nav-item active">
<a class="nav-link" href="#">Contact Us <span class="sr-only"> 
(current)</span></a>
</li>              
</ul>  
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="#">Sign-Up</a>           
</li>
  dropdown menu 
<li class="dropdown">
<a href="#" class="btn btn-secondary dropdown-toggle " data- 
toggle="dropdown"> Log In <span class="caret"></span> </a>
<ul id="login" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12"> Log In Via:
<div class="social-buttons  d-flex flex-row">
<a href="#" class="btn btn-fb"><i class="fa fa- 
facebook"aria-hidden="true">Facebook</i></a>
<a href="#" class="btn btn-tw"><i class="fa fa-twitter" 
aria-hidden="true">Twitter</i></a>
<a href="#" class="btn btn-ins"><i class="fa fa- 
instagram" aria-hidden="true">Instagram</i></a>
</div>
</div>                                      
</div>
</li>
</ul>
</li>
</ul>
</div>
Alain Merigot
  • 10,667
  • 3
  • 18
  • 31
toby
  • 3
  • 4
  • 1
    please share the CSS for the affected part – Julian Silvestri Feb 07 '19 at 13:33
  • The css .navbar-light .navbar-brand{ color: greenyellow; font-size: 22px; } .btn-secondary { font-size: 15px; line-height: 1; color: #fff; letter-spacing: 0.025em; margin-top: 11px; margin-right: 500px; border-radius: 2px; position: absolute; } .navbar-nav .dropdown-menu{ position: absolute; } – toby Feb 07 '19 at 13:47

1 Answers1

1

Try using the Bootstrap helper class dropdown-menu-right like this:

<ul id="login" class="dropdown-menu dropdown-menu-right">

Tomislav Atanasov
  • 26
  • 3