Creating a hamburger navigation bar with Semantic UI on Rails
Creating a hamburger navigation bar with Semantic UI on Rails
I'm attempting to create a hamburger menu with Semantic UI on Rails, but it isn't working. On the navigation bar, I have the logo Recipeazy, and then I have 3 items, Home, About Us, and Settings, and then I have 2 buttons: Create a new Recipe, and Sign out. (If the user is not signed in, there are only 2 buttons, Login and Sign up. I used ruby to make the if else statement). I tried doing what someone did over here but it did not work. So then I tried inspecting Semantic UI's webpage's side bar and still did not work. I would like to stick with Semantic UI's sidebar though. Here is my code:
application.html.haml
!!!
%html
%head
%title Recipeazy
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
%link:rel => "stylesheet", :href => "http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css"
%link:rel => "stylesheet", :href => "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
= csrf_meta_tags
%body
%div.ui.fixed.inverted.main.menu
%div.ui.container
%a.launch.icon.item
%i.content.icon
.wrapper.clearfix
%div.brand.item
#logo= link_to "Recipeazy", root_path
%nav
- if user_signed_in?
%div.item
= link_to root_path do
%i.fa.fa-home
Home
%div.item
= link_to about_path do
%i.fa.fa-book
About Us
%div.item
= link_to edit_user_registration_path do
%i.fa.fa-cog
Settings
%div.item
= link_to new_post_path, class: "button" do
%i.fa.fa-plus
Add Recipe
%div.item
= link_to destroy_user_session_path, class:"button", method: :delete do
%i.fa.fa-sign-out
Sign Out
- else
%item
= link_to "Log In", new_user_session_path, class: "button"
%item
= link_to "Sign Up", new_user_registration_path, class: "button"
%p.notice= notice
%p.alert= alert
.wrapper
= yield
I think that the Semantic UI is working because I already used it to style the buttons on my other pages.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.