-
Notifications
You must be signed in to change notification settings - Fork 1
Navbar
The navbar currently has 2 color themes, light and dark.
You wish us to add a new color theme? Suggest it via a pull request!
The navbar is built by 3 elements: nav, ul and li.
The whole navbar is built upon the nav element, so if you delete nav the whole navbar would be gone.
The ul element collects all the li elements.
The li elements must have the class “nav-object” to work correct.
The navbar has a breakpoint at 767px, wich means the navbar is fully responsive. When the navbar is under 767px the button “collapse-button” is shown insted. And when the button is clicked the openCollapsedNav() function is triggered.
To open the dropdown the function “dropdownContentShow()” is triggered, when the function is active the div “dropdown-content” is shown. The dropdown acts like any other li element.
The dropdown implemented in a navbar looks like this:
<li class="dropdown nav-object" onclick="dropdownContentShow()">Dropdown <i class="dropdown-arrow-down"></i>
<div class="dropdown-content" id="dropdown">
<a href="#">Dropdown</a>
<a href="#">Dropdown</a>
<div class="dropdown-line"></div>
<a href="#">Dropdown</a>
</div>
</li>
A example of a light themed Navbar can look like this:
<nav class="navbar-light">
<span class="navbar-title">Navbar</span>
<button type="button" class="collapse-button" onclick="openCollapsedNav()"><i class="nav-icon-black"></i></button>
<ul>
<div class="collapsed-nav" id="collapsed-nav">
<li class="nav-object"><a href="#">Home</a></li>
<li class="nav-object"><a href="#">Item</a></li>
<li class="dropdown nav-object" onclick="dropdownContentShow()">Dropdown <i class="dropdown-arrow-down"></i>
<div class="dropdown-content" id="dropdown">
<a href="#">Dropdown</a>
<a href="#">Dropdown</a>
<div class="dropdown-line"></div>
<a href="#">Dropdown</a>
</div>
</li>
<li class="nav-object"><a href="#">Item</a></li>
</div>
</ul>
</nav>
Let’s say we want a dark themed Navbar insted..
Then we would have to replace the nav class to “navbar-dark” from “navbar-light”.
We would also have to change the icon that is shown in the Navbar on mobile devices to a white one insted of the dark one.
We would have to replace the i class inside of the button element to “nav-icon-white” insted of “nav-icon-black”.
After this the code would look like this:
<nav class="navbar-dark">
<span class="navbar-title">Navbar</span>
<button type="button" class="collapse-button" onclick="openCollapsedNav()"><i class="nav-icon-white"></i></button>
<ul>
<div class="collapsed-nav" id="collapsed-nav">
<li class="nav-object"><a href="#">Home</a></li>
<li class="nav-object"><a href="#">Item</a></li>
<li class="dropdown nav-object" onclick="dropdownContentShow()">Dropdown <i class="dropdown-arrow-down"></i>
<div class="dropdown-content" id="dropdown">
<a href="#">Dropdown</a>
<a href="#">Dropdown</a>
<div class="dropdown-line"></div>
<a href="#">Dropdown</a>
</div>
</li>
<li class="nav-object"><a href="#">Item</a></li>
</div>
</ul>
</nav>
CSS Extended - Created with ❤️ by Emil & brunph.