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.

Popular posts from this blog

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Edmonton

Crossroads (UK TV series)