In Bootstrap 3, how can I set the list items from a dropdown as a first level menu item, and only on xs screen size?

Question

This is my page structure:

Page 1

• Sub-page 1
• Sub-page 2

Page 2

Page 3

---

On mobile views, I want this to be rearranged like this:

Page 1

Page 2

Page 3

Sub-page 1

Sub-page 2

I was able to achieve this using my limited knowledge of jQuery with the following:

<script>
bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
  $('.dropdown .sub-page').appendTo($('.navbar-right'));
</script>

http://www.bootply.com/XI1gMtscQ5

However, when you resize the window back up to SM, MD, LG widths, the subpages don't go back to where they're supposed to be unless you refresh the page. How can I have them rearrange to be 1 level only on mobile view?

Answer 1

Do two different nav sets and you can do it using only CSS and HTML really.
Make the menu you want for sm,md,lg like

/* this displays it only on small, medium and large screens */
<div id="navbarBigScreen" class="hidden-xs visible-sm visible-md visible-lg">
  /* Navbar code here */
Page 1
   Subpage 1
   Subpage 2
Page 2
Page 3
</div>

/* this does only extra small screens */
<div id="navbarExtraSmallOnly" class="visible-xs hidden-sm hidden-md hidden-lg">
/* navbar for extra small here */
  Page 1
  Page 2
  Page 3
  Sub page 1
  Sub page 2
</div>

Try that out, don't forget to include the navbar classes as well, but definitely try that. It's how I, and a lot of developers, display different content for different sizes.
On my portfolio for example I hide several buttons this way on my page when it's broken down to a mobile view to make it less cluttered.

Answer 2

See the Bootstrap Documentation here .

For example for the subpages you would give the following classes.

Give the child subpages (where they are under page 1) the class hidden-xs and give the subpage items that should only be visible on mobile the class visible-xs