Navbar

Navbar

by Eduardo Camarillo -
Number of replies: 14
Hello!

I'm currently using Moodle 3.4.1+ and I'm developing a theme based on boost.

I need to add one more navbar, but it does not work. I know that boost is based on bootstrap 4 alpha 4. However, I've followed the instructions of bootstrap's site (http://v4-alpha.getbootstrap.com/components/navbar/) but it doesn't work.

Also I've noticed that the navbar class is overwrited by Moodle, maybe that is where my problem resides.

I would like to know if there is a way to add the additional navbar that I need or is there another way to get the navbar I need.

Example navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <i class="icon fa fa-bars fa-fw " aria-hidden="true" aria-label=""></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Thanks in advance,
Eduardo
Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hello Eduardo, 

It should be easy to add a navbar other than the one that is in your theme already. However, I suspect that the problem you are faced with is perhaps due to the way in which you are adding the code, or should I say, the file you are adding it to?

To make sure we are on the same page, can you tell me where exactly are you adding the code for your seconed navbar? Also have you added it inside a unique div containers?

Thanks,

Mary

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -
Hello Mary,

First of all, thank you for your answer.

I need to add it to the login page, the file that I've edited is the following:
* mytheme/templates/login.mustache


But also I need to add it to the header.mustache on Boost, for this reason, I've created a file in my child theme like this:
* mytheme/templates/header.mustache


I've attached a screenshot of the login page.

The code is:
<div id="page-wrapper">
    <nav class="navbar navbar-expand-md fixed-top navbar-moodle">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="{{{logos_prepabier}}}">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <i class="icon fa fa-bars fa-fw " aria-hidden="true" aria-label=""></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Action</a>
                            <a class="dropdown-item" href="#">Another action</a>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

Thank you,
Eduardo
Attachment screenshot_loginpage.png
Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Further to my last comment...

The navbar code you added above looks to be working OK here...so it should work in the theme you are working on!

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -

I do not know, it should look like this:

Example navbar


Best regards,

Eduardo

Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

The navbar collapse is causing that button to show instead of the navbar.

i'll try and look into this tomorrow.

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -

Thank you! smile

Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

This works...

Title

<div class="navbar">
<div class="navbar-inner"><a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -

Thank you very much Mary!

But it doesn't work for me, I don't know what is wrong sad.


I pasted your code into my template login.mustache and the result is:

Example navbar Mary


Maybe, do I need to install a plugin...?


Thank you for your time,

Eduardo

Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Eduardo,

You do not need a plugin, all you need is help with how to enter that code in a mustache file.

Can you upload a copy of the file you added that code to so I can test it in my Moodle Test server?

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -

Hi Mary,


Of course, I've attached the file.


Thanks,

Eduardo

Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Eduardo,

The problem, as I see it, is to do with the collapse button. This is coded differently in Moodle so that is not needed.

The rest of the code should display inline so the problem now looks like the SCSS is not working because the code you added is not correct for the SCSS version Boost is using.

If all you are looking for is an horizontal navigation list of links then a simple HTML one is just as good.

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal

Hope this helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Navbar

by Eduardo Camarillo -

Hi Mary,

Thank you.


Eduardo.

Average of ratings: -
In reply to Eduardo Camarillo

Re: Navbar

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

If you do use the example, which does work, you need to add the CSS to your theme's Advanced settings -> Raw SCSS section at the bottom of that settings page.

Average of ratings: -