Can't use proper margin in nabar

Bootstrap Studio Help
1

Hi, I used as a template navbar with centred brand. I have some issue, because i can't set the navitems in proper places I try to use margin left and right in procents (%), but it mess up.

enter image description here

red points is the places where i want to have navitems

2

So without knowing your code and version of Bootstrap your project was based on. I started with a fresh Bootstrap 4 project.

  • I drag/dropped in the Navbar Component.
  • I selected the Navbar block in the Overview pane (bottom/left).
  • I selected the Add to Navbar "NAV" button in the toolbar above the Live View pane (middle/top) to set a second nav.
  • I selected the Navbav Collapse block in the Overview pane.
  • I selected the Gear Cog icon in the Options pane (top/right).
  • I expanded the Flexbox section an expanded/set Justify Content MD to Between.
  • I selected the first Nav block in the Overview pane.
  • I selected the Gear Cog icon in the Options pane.
  • I expanded the Flexbox section an expanded/set Justify Content MD to Around.
  • I did the same for the second Nav block in the Overview pane.

So the HTML looks something like

<nav class="navbar navbar-light navbar-expand-md">
    <div class="container-fluid">
        < a class="navbar-brand" href="#">Brand< /a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
            < span class="sr-only">Toggle navigation< /span>
            < span class="navbar-toggler-icon">< /span>
        </button>
        <div class="collapse navbar-collapse justify-content-md-between" id="navcol-1">
            <ul class="nav navbar-nav justify-content-md-around">
                <li role="presentation" class="nav-item">
                    < a href="#" class="nav-link active">First Item< /a>
                </li>
                <li role="presentation" class="nav-item">
                    < a href="#" class="nav-link">Second Item< /a>
                </li>
            </ul>
            <ul class="nav navbar-nav justify-content-md-around">
                <li role="presentation" class="nav-item">
                    < a href="#" class="nav-link active">First Item< /a>
                </li>
                <li role="presentation" class="nav-item">
                    < a href="#" class="nav-link">Second Item< /a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Then I added the following CSS

@media (min-width: 768px) {
  .navbar-brand {
    position:absolute;
    margin:auto;
    left:41%;
    right:41%;
    text-align:center;
  }
}

@media (min-width: 768px) {
  .nav.navbar-nav {
    width:40%;
  }
}

At least it might be something that you can work from if not use exactly.

Saj

3

I already solve that by changing my mind about the design of navbar. But still thank you for such a exhaustive answer

4

Your welcome :)

Saj

5

Thanks for the CSS Saj!

6

Your welcome @sampson, glad I could help :)

Saj