TheBestTutorials.css Navigation
TheBestTutorials.css provide all kinds for navigation bars:
Vertical:
Horizontal (vertical on small screens):
Basic Navigation
The TheBestTutorials-navbar class creates a horizontal navigation bar:
Example
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Colored Navigation Bars
Example
<ul class="subhodaya-navbar subhodaya-green">
<ul class="subhodaya-navbar subhodaya-blue">
Bordered Navigation Bars
Example
<ul class="subhodaya-navbar subhodaya-border subhodaya-round subhodaya-light-grey">
<ul class="subhodaya-navbar subhodaya-card-8 subhodaya-light-grey">
Active/Current Link
Example
<li><a class="subhodaya-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
Hoverable Links
When you mouse over the links inside the navigation bar, the background color will change to grey.
If you want a different background color on hover, use any of the subhodaya-hover-color classes, and if you want a different text color on hover, use any of the subhodaya-hover-text-color classes:
Example
<li><a class="subhodaya-hover-red" href="#">Home</a></li>
<li><a class="subhodaya-hover-blue" href="#">Link 1</a></li>
<li><a class="subhodaya-hover-green" href="#">Link 2</a></li>
<li><a class="subhodaya-hover-teal" href="#">Link 3</a></li>
</ul>
Right-Aligned Links
Example
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="subhodaya-right"><a class="subhodaya-green" href="#">Link 3</a></li>
</ul>
Navigation Bar Size
Change the font size:
Example
<ul class="subhodaya-navbar subhodaya-green subhodaya-xlarge">
Change the padding:
Example
<li><a class="subhodaya-padding-16" href="#">Home</a></li>
<li><a class="subhodaya-padding-16" href="#">Link 1</a></li>
<li><a class="subhodaya-padding-16" href="#">Link 2</a></li>
<li><a class="subhodaya-padding-16" href="#">Link 3</a></li>
</ul>
Customize the width of the list items with the CSS width property (Note: on smaller screens, they will transform to 100%):
Example
<li style="width:50%"><a class="subhodaya-padding subhodaya-green" href="#">Home</a></li>
<li style="width:50%"><a class="subhodaya-padding" href="#">Link 1</a></li>
</ul>
Navigation Bar with Icons
Example
<li><a class="subhodaya-green" href="#"><i class="fa fa-home subhodaya-large"></i></a></li>
<li><a href="#"><i class="fa fa-search subhodaya-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope subhodaya-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe subhodaya-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in subhodaya-large"></i></a></li>
</ul>
The "fa fa" classes in the example above display "Font Awesome" icons.
Learn more about how to display icons in the chapter TheBestTutorials.css Icons.
Navigation Bar with Dropdown
Move the mouse over the "Dropdown" link:
Example
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="subhodaya-dropdown-hover">
<a href="#">Dropdown</a>
<div class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
Note: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a subhodaya-hover-color class to both the "dropdown" <li> and <a>:
Tip: If you want a dropdown symbol next to the dropdown text, add a suitable icon (like ):
Example
<a class="subhodaya-hover-orange" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<div class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
Clickable Dropdown
Use TheBestTutorials-dropdown-click if you prefer to click on the dropdown link instead of hover:
Example
<a onclick="myFunction()" href="javascript:void(0)">Dropdown <i class="fa fa-caret-down"></i></a>
<div id="demo" class="subhodaya-dropdown-content subhodaya-white subhodaya-card-4">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
Dropnav
The TheBestTutorials-dropnav class creates a full-width dropdown menu:
Toggleable Dropnav
The example above use the "Dropnav" link to open the menu, and the "x" icon to close it. This example shows how to toggle the dropnav menu each time you click on the "Dropnav" button:
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the <ul> and add the TheBestTutorials-top or TheBestTutorials-bottom class:
Fixed Top
<ul class="subhodaya-navbar">
...
</ul>
</div>
Fixed Bottom
<ul class="subhodaya-navbar">
...
</ul>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you could use utility classes to hide and show specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the navigation bar will be displayed stacked:
Topnav
Another example of a navigation bar, is the subhodaya-topnav class. It is similar to TheBestTutorials-navbar, except that it will add an underline when you hover over the links, instead of a background color:
Example
<a href="#">Home</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
Example with Font Awesome Icons
<a href="#"><i class="fa fa-home"></i></a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
Side Navigation
The TheBestTutorials-sidenav class creates a vertical navigation bar:
Go to the next chapter to learn more about the side navigation.
