I've been struggling with this issue for hours now. Despite searching online for solutions, I haven't been able to make my navbar list go vertical or get the "logout" and "My Posts" options to drop down when "Author" is selected as it should. Here's the HTML snippet causing me trouble:
<nav class="navbar navbar-light bg-faded">
<div class="container">
<a href="/" class="navbar-brand">
Bella<span class="light">blog</span>
</a>
<button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
☰
</button>
<ul class="nav navbar-nav pull-sm-right hidden-xs-down">
<li class="nav-item">
<%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
</li>
<li class="nav-item">
<%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
</li>
<li class="nav-item">
<%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
</li>
<% if author_signed_in? %>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Author
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li>
<%= link_to 'My Posts', authors_posts_path, class: "dropdown-item #{yield(:author)}" %>
</li>
<li>
<%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
</div>
</li>
<% end %>
</ul>
</div>
</nav>
Below is the SCSS code that accompanies the HTML above:
.navbar {
border-radius: 0;
margin-bottom: 20px;
background-color: gray;
.navbar-brand {
font-weight: bolder;
color: $accent-color;
.light {
font-weight: 300;
color: white;
}
}
.navbar-expand-* {
outline: none;
}
.nav-link {
color: $light-primary-color !important;
&.active {
color: $text-primary-color !important;
}
}
}
.collapse-bg {
padding: 0 !important;
.card {
margin-bottom: 0;
border-radius: 0;
border: none;
}
}
.collapse-bg .card .list-group-item {
padding: 0;
border-radius: 0 !important;
border-color: black;
a {
background-color: #1a1a1a;
color: #bdc3c7;
width: 100%;
height: 100%;
padding: 10px;
&:active {
color: white;
border-bottom: none;
}
}
}
Despite following an example from https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp, the dropdown feature still isn't working properly in my project.