Semantic-ui: Responsive Navbar

Created on 19 Jan 2016 · 8Comments · Source: Semantic-Org/Semantic-UI

Would like semantic UI to create a responsive navbar similar to bootstrap.

It is currently impossible to have the semantic UI dropdowns function correctly when collapsed in a mobile view.

Tried to use the "accordion" functionality when on mobile, but that solution does not convert well for desktop.

https://getbootstrap.com/examples/navbar-static-top/

Duplicate

Source

svansoeren

👍14

Most helpful comment

svansoeren, Semantic UI has an outstanding "all-in-a-box" Sidebar menu (http://semantic-ui.com/modules/sidebar.html#/definition), which works great on tablets and mobiles. All you have to do is to hide navbar menu items on small screens and show a button that will trigger the sidebar menu.

However, bad thing is that you have to duplicate menu items for navbar and sidebar.

Thanty on 19 Jan 2016

👎18 👍7

All 8 comments

However, bad thing is that you have to duplicate menu items for navbar and sidebar.

Thanty on 19 Jan 2016

👎18 👍7

Thank you for the alternative page functionality and layout suggestion.

As well as the HTML / CSS re-structure suggestion.

However, not really interested in duplicating the HTML and design elements (makes the content more difficult to maintain).

Still interested in seeing a responsive navbar developed. (if this does get completed it would not be difficult translate the responsiveness to the "sidebar").

svansoeren on 19 Jan 2016

👍3

Well, menu element duplication is wrong IMHO. May @jlukic consider this improvement.

jokeronaldo on 19 Feb 2016

Check issue #157

abijr on 16 Apr 2016

Agreed. Let's close this and keep it on #157.

dijonkitchen on 1 Feb 2017

See #157.

awgv on 13 Feb 2017

Hi,
Since #157 comments are blocked I post here, shall others have similar issues.
For me using https://react.semantic-ui.com/collections/menu#menu-example-stackable was enough on mobile.