I am currently following this tutorial and have reached this particular part. However, I'm facing an issue where the mobile hamburger menu doesn't display the menu when clicked on mobile devices. Additionally, the hover effect is not working for the `dropdown-toggle` element on desktop.
Any assistance would be highly appreciated.
Below is the content of _navigation.html.erb
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<!-- Elements visible all the time -->
<div class="col-sm-7">
<%= render 'layouts/navigation/header' %>
</div><!-- col-sm-7 -->
<!-- Elements collapses on smaller devices -->
<div class="col-sm-5">
<%= render 'layouts/navigation/collapsible_elements' %>
</div><!-- col-sm-5 -->
</div><!-- row -->
</div><!-- container -->
</nav>
Here is the content of _header.html.erb
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapsible-content" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to 'User Logins', root_path, class: 'navbar-brand' %>
</div>
Lastly, here is the content of _collapsable-elements.html.erb
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapsible-content">
<ul class="nav navbar-nav ">
<% if user_signed_in? %>
<li class="dropdown pc-menu">
<a id="user-settings" class="dropdown-toggle" data-toggle="dropdown" href="#">
<span id="user-name"><%= current_user.name %></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><%= link_to 'Edit Profile', edit_user_registration_path %></li>
<li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
</ul>
</li>
<li class="mobile-menu">
<%= link_to 'Edit Profile', edit_user_registration_path %>
</li>
<li class="mobile-menu">
<%= link_to 'Log out', destroy_user_session_path, method: :delete %>
</li>
<% else # user not signed it %>
<li ><%= link_to 'Login', login_path %></li>
<li ><%= link_to 'Signup', signup_path %></li>
<% end # if user is signed it %>
</ul>
</div><!-- navbar-collapse -->
I believe I have included all necessary information to troubleshoot this issue. If there's anything crucial that I missed, please let me know!
Thank you :)
Edit:
I neglected to include the styling in navigation.scss
body {
margin-top: 50px;
}
nav {
.navbar-header {
width: 100%;
button, .navbar-brand {
transition: opacity 0.15s;
}
button {
margin-right: 0;
}
button:hover, .navbar-brand:hover {
opacity: 0.8;
}
}
.col-sm-5, .col-sm-7 {
padding: 0;
}
}
.navbar-default, .navbar-toggle:focus, .collapsed, button.navbar-toggle {
background: $navbarColor !important;
border: none;
a {
color: white !important;
}
}
.pc-menu {
margin-right: 10px;
}
.mobile-menu {
i {
color: white;
}
ul {
padding: 0px;
}
a {
display: block;
padding: 10px 0px 10px 25px !important;
}
a:hover {
background: white !important;
color: black !important;
i {
color: black;
}
}
}
.icon-bar {
background-color: white !important;
}
.active a {
background: $navbarColor !important;
border-bottom: solid 5px white;
}
.dropdown-toggle, .dropdown-menu {
background: $navbarColor !important;
border: none;
}
.dropdown-menu a:hover {
color: black !important;
background: white !important;
}