Move Dropdown to Navbar Right

Bootstrap Studio Help
1

Pretty self explanatory. I want the dropdown on the right in the "actions" element. See screenshot for clarification. Hoping this is possible without having to convert it to html.

2

Have you tried dragging the dropdown section to the right? So that it's sits under the paragraph section the the overview panel

3

Or do you have a screenshot that shows the desired result

4

I believe this will do what you want, seems to work for me. I didn't test it with the paragraph and I see your example has that part inside the Block element not the navbar, but it shouldn't matter because the dropdown is the last element within the navbar which is where the flexbox is being used. Which means even if you add another paragraph element at the right the dropdown would still position appropriately to the right regardless of the less space. Unless you add to many times so there isn't any space :) . The media query will restore the default behavior when the menu collapses to hamburger access.

@media (min-width:768px){
  .navbar-nav {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    float:none;
  }
}

@media (min-width:768px){
  .navbar-nav .dropdown {
    margin-left:auto;
  }
}

Sorry Chris ;)

Saj

5

Ok, I can see an issue after further testing, I'll have to figure that out. But it's a good start :D

Saj

6

You can try this update. Would just have to also drap/drop the P before the UL in the order.

@media (max-width:767px) {
  #navcol-1[aria-expanded="true"] {
    display:flex;
    flex-direction:column;
  }
}

p.navbar-text.navbar-right.actions {
  order:2;
}

@media (max-width:767px) {
  p.navbar-text.navbar-right.actions {
    float:none !important;
  }
}

@media (min-width:768px) {
  .navbar-nav {
    display:flex;
    float:none;
  }
}

@media (min-width:768px) {
  .dropdown {
    margin-left:auto;
  }
}

See if that works well enough for you.

Saj

7

Thanks for the responses. I got it working by deleting the paragrah and adding another "nav" element then add the navbar-right class to it. I was then able to drag the Dropdown into the nav element. Tada!

enter image description here

8

That works too :) Good to hear you got what you wanted :)

So did you not want the login thing at all before? If so, you could have just used my first post after you deleted the P element and you wouldn't have had to do anything more.

But it's all good glad you worked it out. :)

Saj