2

I've figured how to align the menu items to the right, but when resized the navbar-toggler doesnt appear.

Code:

<nav class="navbar navbar-toggleable-md">
    <a asp-controller="Home" asp-action="Index" class="navbar-brand">
        <img class="brand_img" src="/Graphic/logo.jpg" style="margin-left:-1px;margin-right:6px;" />
        <span class="brand_name">Lundbeck Consulting</span>
    </a>
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarFullCollapse" >
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarFullCollapse">
        <div class="nav navbar-nav">
            <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="About">Om LC</a>
            <a class="nav-item nav-link navbar_item" asp-controller="Project" asp-action="Index">Prosjekter</a>
            <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="Contact">Kontakt</a>
        </div>
    </div>
</nav>

Please see http://core.lundbeckconsulting.no for demo

thanks in advance!

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624

2 Answers2

4

Updated 2022

The Bootstrap 5 Navbar also requires navbar-light or navbar-dark to make the hamburger show when the Navbar is toggled to mobile mode.

Updated 2018

The hamburger is there, but it's not visible because the Navbar needs a color, or change the toggler color.

<nav class="navbar navbar-toggleable-md bg-faded navbar-light">
    ..
</nav>
  • Use navbar-dark to produce light/white colored links and toggler
  • Use navbar-light to produce dark/gray colored links and toggler

In Bootstrap 4.0.0 navbar-toggleable- has changed to navbar-expand-, but navbar-light and navbar-dark still work the same way...

<nav class="navbar navbar-expand-md navbar-light bg-light">
    ..
</nav>

also see: Bootstrap navbar: nothing is displayed on smaller devices

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

The code is fine, however I'd stay with the documentation and replace button just after opening tag because it may have something with js loading.

EDIT: I inspected your website once again and found the button, top right corner! Now all you have to do is change its color and position. Use google chrome dev tools (f12) and searh for it while your window is resized.

Dražen
  • 293
  • 2
  • 13
  • thank you for looking at my code. Now I can finally find the button. but I thought navbar-toggler-icon would render the famous hamburger. How do I change the color? I tried color:black, but that didnt do anything.. –  Feb 26 '17 at 09:49
  • Bootstrap 4 no longer uses char but an image for the icon. You might want to try changing BACKGROUND-color and border-color. – Dražen Feb 26 '17 at 09:57
  • I can change background and border, but it has no effect on the three lines in the middle. maybe its easier to just use a custom image..? –  Feb 26 '17 at 10:13
  • the icon became visible when I added navbar-light (for some reason). Thank you for taking time to help :) –  Feb 26 '17 at 10:26
  • Light theme for the navbar overridden background color ;) – Dražen Feb 26 '17 at 10:29