Navbar

A crucial component of any website: a 'sticky', customisable and responsive navbar.

The vast majority of websites have at least some sort of navbar (navigation bar). Magic comes with some simple but powerful tools to build one. Here's an example:

Looks familiar? Of course - it's on the top of every page within this website!

By default, Navbars are fixed at the top of the page. The examples on this page have custom styles (not available in Magic) to stop them from moving to their normal position, for demostration purposes.

Simple navbar

To build a simple navbar, use the following code:

<nav class="default">
  <ul class="nav-left">
    <li><a href="#" class="nav-brand-text">My Website</a></li>
  </ul>
  <ul class="nav-right">
    <li class="nav-item"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
    <li class="nav-item"><a href="#">Pricing</a></li>
  </ul>
</nav>

On the first line, replace the default class name with any standard Magic colour (all colours (including dark and light) except darkens and lightens). This will make several colours change automatically.

All colours

You may also have noticed that navbars have a slight aesthetic shadow on the bottom. This typically looks nice on websites, but can be disabled by adding the no-shadow class.

Navbar components

As you saw in the example code above, a navbar has two main sections: nav-left and nav-right. Below is an explanation of their uses and components.

nav-left

This section contains items that appear on the left side of the navbar. This typically contains two items.

Brand

One of the most important parts of a website is the 'brand' within the navbar. In Magic, this can either be text or an image. It is defined as a list item within the nav-left unordered list. To make a textual navbar brand, use the following markup inside your navbar:

<ul class="nav-left">
  <li><a href="#" class="nav-brand-text">My Brand</a></li>
</ul>

Most websites, however, would want to add an image as their icon. This can be done with the following markup:

The positioning of this icon may appear strange, but don't worry! This is because we haven't added any nav-right section yet.

Hamburger menu

The other item found in the nav-left section is the mobile 'hamburger' menu button. This is a button that opens a mobile navigation menu, and is only visible on mobile and tablet devices. The following markup adds the button (required FontAwesome):

<ul class="nav-left">
  <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li>
  <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li>
</ul>
Please note that the button does not yet do anything. To completely set up a mobile navbar, see the responsive section of this page.

nav-right

The nav-right section contains links within an unordered list. It comes directly after the nav-right section in your HTML. To create a simple set of links, use the following markup:

<ul class="nav-right">
  <li class="nav-item"><a href="#">Home</a></li>
  <li class="nav-item"><a href="#">About</a></li>
  <li class="nav-item"><a href="#">Contact</a></li>
  <li class="nav-item"><a href="#">Pricing</a></li>
</ul>
Active items

To make a navbar link appear 'active', just add the active class to the nav-item.

Where to put it

Your navbar markup must be the first thing within the body of your website, outside of any container. For example:

<body>
  <nav class="default">
    <ul class="nav-left">
      <li><a href="#" class="nav-brand-text">My Website</a></li>
    </ul>
    <ul class="nav-right">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">About</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
      <li class="nav-item"><a href="#">Pricing</a></li>
    </ul>
  </nav>
  <div class="container">
    ...

Responsive

Magic also has a variety of tools for making your navbar work well on tablet and mobile devices. There is a minimal amount of JS involved, as well as some additional markup. Firstly, add something like the following, before the main navbar:

<div id="nav-mobile" class="default"> <!--Replace default with any Magic colour-->
  <a href="javascript:void(0)" class="close" onClick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Pricing</a>
</div>
The links used here should typically be the same as within your normal navbar.

Make sure that your main navbar contains something like <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li>, with which mobile and tablet users can open your navbar.

Next, add this to your page head:

<script>function openNav(){document.getElementById("nav-mobile").style.width = "100%";}function closeNav(){document.getElementById("nav-mobile").style.width = "0";}</script>

That's it! You should have a functioning mobile navbar! This page also has one. If you are using a desktop device, you can test it out with the button below:

Open navbar

Animation

You can also make the mobile navbar 'slide' rather than appear, by adding the animate class to the div:

Open animated navbar

Dropdowns

To add a dropdown to your navbar, see the Dropdown docs. Here's a preview: