How in mobile version when opening Navbar, inner Dropdown has been deployed?

Bootstrap Studio Help
1

How in mobile version when opening Navbar, inner Dropdown has been deployed? That is to navbar items and inner dropdown items were a single continuous list. Without Javascript it is possible to make, that is, only in CSS? Thanks.

2

It is possible but it's not necessarily easy because you still need something that effectively triggers something. I have in the past used a checkbox input to achieve this but in the design of the NAVBAR component, I don't think would actually work or work well. CSS handles everything of the NAVBAR component except for the literal triggering by the person clicking on the hamburger menu expand collapse function of the dropdown menus exposure.

Saj

3

And now that I posted that, I can imagine that some are thinking well how do you use a checkbox to accomplish that so I guess here is an example of what I did. I did in fact test this in BSS preview, used Custom Code component to create it. Uses 0 [zero] Javascript.

HTML

<label for="collapse-checkbox">
    <input type="checkbox" hidden id="collapse-checkbox" name="collapse-checkbox">
    <span></span>
    <div class="clickMe-content">If your seeing this it's because you've Clicked ME</div>
</label>

CSS

* {
  box-sizing:border-box;
}

[hidden] {
  display:none;
}

#collapse-checkbox ~ .clickMe:before {
  content:"[ Click Me ]";
}

#collapse-checkbox:checked ~ .clickMe:before {
  content:"[ Click Me Again ]";
}

#collapse-checkbox ~ .clickMe-content {
  max-height:0;
  color:#fff;
  background-color:#000;
  overflow:hidden;
  transition:all 1s ease;
}

#collapse-checkbox:checked ~ .clickMe-content {
  max-height:100em;
  padding:1em;
}

Saj

4

Sorry, I probably poorly explained. I mean, do not add a new javascript code, but only css. The standard bootstrap library can be used. Here JSFIDDLE you can see that when you open the menu on a narrow screen, Dropdown collapsed. And need to has been deployed, it is to make a single continuous list. Perhaps there is some class to it, but I could not find it.

5

Ok, I think I might be getting it better but not sure

In the fiddle, if you drag the divider line between HTML and Javascript so you can see alot more of the code.

The BUTTON element is the hamburger menu when you are viewing it in mobile view. The SPANs are used to create the hamburger look i.e. the lines. Handled by CSS

The DIV below with the class="collapse navbar-collapse" is what contains your navigation. That DIV in mobile view effectively gets hidden by CSS.

When you click the BUTTON element all the Javascript really does is change some classes etc..

On the BUTTON element it changes the class="navbar-toggle" to class="navbar-toggle collapsed" and aria-expanded="false" to aria-expanded="true"

On the DIV element it changes the class="navbar-collapse collapse" to class="navbar-collapse collapsing" to class="navbar-collapse collapse in" and it's aria-expanded="false" to aria-expanded="true" and also added an inline style with the height:1px when collapsed and height:X when expanded. X=calculated height of unordered list and it's parent DIV.

So the JS just changes some classes etc.. and based on the existence or not, the menu expands or collapses.

Is that better?

Saj

6

I can not get done without adding a new JS, so that when the button is pressed (of three lines) appears not only Link 1, but also show Link 2 and Link 3 (ie Dropdown also unfolded)

7

Ok, I think I know more now.

It seems that when you are in mobile view and you click the hamburger menu, you want the dropdown that is in the navigation section to also be expanded. Yes that would be better done by using Javascript that has a setTimeout to wait for the collapse script to complete then the script would add a class "open" to the LI with the class="dropdown".

However, I figured out the CSS to do this, though there is an issue with it because this method makes the dropdown effectively no longer work like a toggle-able dropdown it will always remain expanded in mobile view even when you click the dropdown. This is because what you are wanting to do is override the CSS that makes the toggling function properly.

Here is the CSS that I came up with, this is the base coloring etc.. from the BSS apps bootstrap.css that I pulled these from. They were copied to my test CSS to override the defaults in bootstrap.css and I only added the display:block; to the first one so the subnav would appear.

@media (max-width:767px) {
  .navbar-collapse.collapse.in .navbar-nav .dropdown-menu {
    display:block;
    position:static;
    float:none;
    width:auto;
    margin-top:0;
    background-color:transparent;
    border:0;
    -webkit-box-shadow:none;
    box-shadow:none;
  }
}

@media (max-width:767px) {
  .navbar-collapse.collapse.in .navbar-nav .dropdown-menu .dropdown-header, .navbar-collapse.collapse.in .navbar-nav .dropdown-menu > li > a {
    padding:5px 15px 5px 25px;
  }
}

@media (max-width:767px) {
  .navbar-collapse.collapse.in .navbar-nav .dropdown-menu > li > a {
    color:#777;
  }
}

If you were to copy/paste that CSS into the CSS box in the fiddle then clicked the RUN button, you would see that it works.

Is that what you are wanting?

Saj

8

Yes, this is what i wanted, thank you so much!

though there is an issue with it because this method makes the dropdown effectively no longer work like a toggle-able dropdown it will always remain expanded in mobile view even when you click the dropdown

This is not required, I even hid the arrow next to the help of the class "hidden-xs"

Here is the final version JSFIDDLE

Thank you again, very sorry that there is no special class, such as "hidden-xs" for the caret (down arrow), using which, the menu was deployed.