Static text and/or custom code item /in Navbar?

Bootstrap Studio Help
1

Hi, Maybe I'm missing something basic here, but I don't see a way to add static text to a navbar component? Seems like all nav items are required to contain link components which cannot be removed?

As a workaround, I looked to try to add a custom code block into a navbar, but again that didn't seem possible?

The use case is I am trying to make a nav bar as follows: [BRAND] [MENU1] [MENU2] etc .... (right-align in new nav) [STATICTEXT: Language:] [DROPDOWN]

It's all working fine except for the static text which for now I've had to insert as a disabled link.

Any tips please? Tony

2

Ok so starting fresh, I did this

  • Search for "nav"
  • drag/drop navbar onto BODY in Overview pane
  • drag/drop nav onto Navbar in Overview pane
  • search for "drop"
  • drag/drop dropdown onto second Nav in Overview pane
  • delete the Nav items of second nav
  • set second nav in Option pane to right alignment
  • search for "para"
  • drag/drop navbar onto Navbar in Overview pane
  • set Paragraph in Options pane to right alignment

Add the following CSS

@media (max-width:767px) {
  #navcol-1.navbar-collapse.in {
    display:flex;
    flex-direction:column;
  }
}

@media (max-width:767px) {
  #navcol-1 .navbar-nav:nth-child(2) {
    order:2;
  }
}

@media (max-width:767px) {
  #navcol-1 .navbar-text {
    margin-top:7.5px;
    margin-bottom:7.5px;
  }
}

This should get you want you want, short of setting the whole navbar as custom code so you can remove the link tag from your current setup I guess.

Saj

3

Hi Saj,

Thanks for the reply! That's exactly what I was looking for actually :) I had tried dragging the para element into the nav, but it hadn't even occurred to me to put it into the navbar itself - doh!

Great job - thanks once again!

Tony

4

Hy,

Can someone explain me, why using flex in a navbar is not possible? + I thought maybe if I add a container to the navbar it can handle this, but I can't add one inside the navbar. Why adding a container to navbar is not possible?

http://www.suzukimotor.rs/wp-content/uploads/2017/11/Navbar-Flex.jpg

Kris

5

When this discussion took place only Bootstrap 3 was available in Bootstrap Studio. Now, in Bootstrap 4, the Navbar is already developed with flexbox. To offset an element to appear on the right, you can select the element, and change this option.