Bulma: Navbar not styling <ul> and <li>

[ajcerejeira]

Overview of the problem

This is about the Bulma CSS framework


My browser is: Firefox 56.0 (64-bit) Ubuntu

Description

When I try to use navbar with <ul> and <li> the nav-items do not get styled

I have the following HTML code:

<nav class="navbar is-primary">
  <h1 class="navbar-brand"><a href="/" class="navbar-item">Children Of U</a></h1>

  <ul class="navbar-menu navbar-end is-active">    
    <li ><a class="navbar-item" href="/blog.html">Blog</a></li>
    <li ><a class="navbar-item" href="/team.html">Voluntários</a></li>
    <li ><a class="navbar-item" href="/gallery.html">Galeria</a></li>
    <li class="active"><a class="navbar-item" href="/contact.html">Contacto</a></li>
  </ul>
</nav>

Expected behavior

If i simply remove the <li> tags it works:

<nav class="navbar is-primary">
  <h1 class="navbar-brand"><a href="/" class="navbar-item">Children Of U</a></h1>

  <ul class="navbar-menu navbar-end is-active">    
    <a class="navbar-item" href="/blog.html">Blog</a>
    <a class="navbar-item" href="/team.html">Voluntários</a>
    <a class="navbar-item" href="/gallery.html">Galeria</a>
    <a class="navbar-item" href="/contact.html">Contacto</a>
  </ul>
</nav>

Actual behavior

Offtopic

Is there any way to style active links (like in Bootstrap)?

[jgthms]

You can't do this:

<ul class="navbar-menu navbar-end is-active"> 

The navbar-end should be a direct child of navbar-menu.

<div class="navbar-menu">
  <ul class="navbar-end"> 
    <li class="navbar-item"><a href="/blog.html">Blog</a></li>

[ajcerejeira]

Thank you for the reply,
I tried the following:

<nav class="navbar is-primary">
  <h1 class="navbar-brand"><a href="/" class="navbar-item">Children Of U</a></h1>

  <div class="navbar-menu">
    <ul class="navbar-end is-active"> 
      <li class="navbar-item"><a href="/blog.html">Blog</a></li>
      <li class="navbar-item"><a href="/team.html">Voluntários</a></li>
      <li class="navbar-item"><a href="/gallery.html">Galeria</a></li>
      <li class="navbar-item"><a href="/contact.html">Contacto</a></li>
    </ul>
  </div>
</nav>

But now the navbar doesn't show any links, only on hover:

[jgthms]

Ah yes, AFAICT the navbar doesn't support li. You need to have:

<div class="navbar-end">
  <a class="navbar-item" href="/blog.html">Blog</a>
</div>

[Log1x]

I personally use @extend because of this-- but it's not something I think is good practice.

I do think you should consider supporting <nav><ul><li><a></a></li></ul></nav> as its the structure of every nav example in existence as well as examples of Schema usage.

[LucyI]

+1 for supporting a nav-ul-li-a navbar structure. Necessary for using Bulma with almost any CMS or portal framework I can think of...

[njwest]

+1, Bulma's nav opinions clash with the opinions of some CMSes/front-end libraries in a challenging way

[caiquecastro]

+1 for this.

[UisgeBeatha436]

+1 Is there any update?

[sjclark]

The ul > li > a structure is really the only correct ARIA approach to this, slightly frustrating it doesn't work correctly.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[patie]

any news?

[RobertSK]

any news?
this is important!

[Sarathlal]

Any updates?

[ajcerejeira]

I know this issue as been automatically marked as closed, however I still think that the ul > li > a structured should be properly supported since it looks more semantic (we are effectively building a "list" of "links").

Do we now what is currently preventing bulma to support this?

[sjclark]

@Log1x could you maybe post the code you're using to extend this?

[MarkoSkofljanec]

I added following SCSS to my Vue component which uses a navbar:

/* Q&D fix for BULMA 0.8 add style for vue router-link with tag="li" */
li.navbar-item {
@extend .navbar-item;
cursor: pointer;
}

/* FIXME: add customize variables */
li.navbar-item:hover {
@extend .navbar-item;
background-color: #f2f2f2;
color: #0a0a0a;
}

[PDXMan1]

This appears to be working.

<div class="navbar-menu">
    <ul class="navbar-end">

        <li class="navbar-item">
            <a>Home</a>
        </li>

        <li class="navbar-item">
            <a>Channel Tab</a>
        </li>

        <li class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">Second Channel Tab</a>

                <ul class="navbar-dropdown">
                    <li class="navbar-item"><a>About</a></li>
                    <li class="navbar-item"><a>Jobs</a></li>
                    <li class="navbar-item"><a>Contact</a></li>
                </ul>

        </li>

    </ul>
</div>