1

I have the following bootstrap navbar: JsFilddle

<nav class="navbar navbar-inverse" role="nagivation"> <!-- todo: add (.navbar-static-top) to make it static -->
  <div class="container">
    <!-- btn for when the browser is shrinked to mobile size -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div> <!-- /navbar-header -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="navbar navbar-inverse site-top-nav">
        <ul class="nav navbar-nav">
          <li> <a href="http://dev.upcounting/html-theme/about.html"><i class="glyphicon glyphicon-tasks"></i> About Us</a></li>
          <li> <a href="#"> <i class="glyphicon glyphicon-cog"></i> Our Services</a></li>
          <li> <a href="#"><i class="glyphicon glyphicon-ok"></i> Pricing </a></li>
          <li> <a href="#"><i class="glyphicon glyphicon-comment"></i> Contact Us</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="glyphicon glyphicon-shopping-cart"></i> My Orders</a></li>
          <li><a href="#"><i class="glyphicon glyphicon-user"></i> Login </a></li>
            <div class="btn-group" style="margin:0 10px;"> 
              <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
                FR <span class="caret"></span> 
              </button> 
              <ul class="dropdown-menu"> 
                <li><a href="#">EN</a></li> 
                <li><a href="#">DE</a></li>
              </ul>
            </div><!-- /btn-group -->
        </ul>
      </div><!-- /navbar navbar-inverse site-top-nav -->
    </div><!-- /collapse navbar-collapse -->
  </div>
</nav>

Currently each menu has it's own <li></li> and I can target each menu and add fontawesome icons to each links like this:

<li> <a href="#"><i class="glyphicon glyphicon-comment"></i> Contact Us</a></li>

But now working with Drupal 8, I can only do something like this:

{% if page.menu %}
<nav class="navbar navbar-inverse" role="nagivation"> 
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <div class="navbar navbar-inverse site-top-nav">
         <div class="nav navbar-nav">
          {{ page.menu }}
          </div>
      </div>
    </div>
  </div>
</nav>
{% endif %}

Which displays all the links, but since {{ page.menu }} does not allow me to add style to each menu, the navbar doesn't look like show in the fiddle, and when the page shrink the menus don't become responsive (since it has no li I assume)

So, how can I fix this issue?

If I have 5 menus, is there a way I can echo each of the like

...
<li> {{ menu.about_us }} </li>  
<li> {{ menu.our_services }} </li>
... 

Or can I somehow target the html outputted by {{ page.menu }} and apply styles to them?

1

You are on the right track with "target the html outputted by {{ page.menu }}" but that is likely a region with a menu block in it, you need to target a little deeper inside.

With theming overrides, you have generally have 2 options: writing a preprocess function in your theme's .theme file and/or writing a twig template file for your theme (usually in your theme's template folder).

For preprocess hooks you want to start by looking at this. https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_preprocess_HOOK/8.2.x

Going this route, you will probably need to implement hook_preprocess_menu(&$variables) & maybe hook_preprocess_link(&$variables). Do some searches on those, there are plenty of examples.

Going the twig template route, you should take a look at https://www.drupal.org/docs/8/theming/twig/working-with-twig-templates

There are also examples out there, but this is one I have found particularly useful: https://medium.com/integral-vision/drupal-8-twig-add-custom-css-classes-to-menus-based-on-menu-name-35b50142521a

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.