1

When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu" What am I missing?

  <!-- logo -->
  <div class="navbar-brand is-large">
  <a class="navbar-item" href="#">
      <img src="assets/img/Grayscale_cloud.png">
    </a>
    <div class="navbar-burger is active" data-target="navbar-menu">
    <span></span>
    <span></span>
    <span></span>
  </div>
  </div>
  <!-- menu -->
  <div class="navbar-menu" id = "navbar-menu">
    <div class="navbar-start">
    <a class="navbar-item" routerLink="">Home</a>
    <a class="navbar-item" routerLink="contact">Contact</a>
    <a class="navbar-item" routerLink="networksupport">Network</a>
    <a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
    </div>

  </div>
</nav>

`,

I tried the code here to no avail. https://medium.com/@edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1

Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?

Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.

user2077340
  • 161
  • 2
  • 8

1 Answers1

3

there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all

  • you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }

  • to get this toggle function to work, you'd have to assign the names in app.component.html

    • you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
    • and <a class="navbar-item" href="#"> .... </a> ...which should have <a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>

  • Also, we had to do npm install bulma

  • add the css in our angular.json:
    "styles": ["node_modules/bulma/css/bulma.min.css" ],

you can check a working sample here

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • Thanks for the sample code. I am working through it and will apply it to my code. I could not get "styles": ["node_modules/bulma/css/bulma.min.css" ],to complie so I went with "styles": [ "../node_modules/bulma/css/bulma.css", "styles.scss" ], – user2077340 May 14 '19 at 12:13
  • Your path is also valid, bulma.min.css is a little smaller in size than bulma.css; good luck !! – Akber Iqbal May 14 '19 at 12:19
  • 1
    Akber, the site is working. Thank you for your wisdom and knowledge.- Ross Mason – user2077340 May 15 '19 at 02:07
  • Hi Ross, I'm glad that it helped. please mark the answer as accepted and vote it up so that others can find it useful also... happy coding :) – Akber Iqbal May 15 '19 at 04:57