Navigation bar in Quickly
With the navigation bar of quickly simplifies the user's experience by providing an intuitive and accessible guide through your website. With clear design and versatile functionalities, it facilitates navigation and improves user interaction, guaranteeing a fluid and satisfactory experience.
Centered bar
Explore our centered navigation bar: intuitive, elegant and easy to use. Quickly access all our main sections while enjoying an uncomplicated user experience.
Example
HTML
<!-- First menu -->
<nav class="navbar rounded bg-black">
<div class="navbar-container grid align-content-hc" id="navbar1">
<div class="navbar-header">
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">My logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse1">
<ul class="navbar-nav">
<li><a href="#">Start</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Justified bar at the ends
Example
HTML
<!-- Second menu -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid space-hb" id="navbar2">
<div class="navbar-header">
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">My logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse2">
<ul class="navbar-nav">
<li><a href="#">Start</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Justified bar inverted ends
To invest a navigation bar, you can use the class".reverse-h-es". This allows you to justify the logo and the menu to the opposite ends without having to modify the code.
Examples
HTML
<!-- Third menu -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid space-hb reverse-es" id="navbar3">
<div class="navbar-header grid space-hb">
<a href="#" class="navbar-brand">My logo</a>
<button class="navbar-toggle" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" id="navbar-collapse3">
<ul class="navbar-nav">
<li><a href="#">Start</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Navbar Con Submenu
Navigation bar with equidistant spaces between its blocks and centered menu.
Examples
HTML
<!-- Fourth menu -->
<nav class="navbar rounded bg-black">
<div class="navbar-container grid space-hb" id="navbar4">
<div class="navbar-header grid space-hb">
<button class="navbar-toggle mml-1" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand mmr-2">My logo</a>
</div>
<div class="navbar-collapse" id="navbar-collapse4">
<ul class="navbar-nav">
<li><a href="#">Start</a></li>
<li>
<a href="#" aria-haspopup="true" aria-expanded="false">About <svg class="ml-1 ico-8 ico-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></a>
<ul>
<li><a href="#">About 1</a></li>
<li><a href="#">About 2</a></li>
</ul>
</li>
<li>
<a href="#" aria-haspopup="true" aria-expanded="false">Services <svg class="ml-1 ico-8 ico-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg></a>
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="hide-s mt-1 mr-1">
<a href="#" title="..." class="mx-1">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 10h-2v2h2v6h3v-6h1.82l.18-2h-2v-.833c0-.478.096-.667.558-.667h1.442v-2.5h-2.404c-1.798 0-2.596.792-2.596 2.308v1.692z"/></svg>
</a>
<a href="#" title="..." class="mr-1">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 7.082c1.602 0 1.792.006 2.425.035 1.627.074 2.385.845 2.46 2.459.028.633.034.822.034 2.424s-.006 1.792-.034 2.424c-.075 1.613-.832 2.386-2.46 2.46-.633.028-.822.035-2.425.035-1.602 0-1.792-.006-2.424-.035-1.63-.075-2.385-.849-2.46-2.46-.028-.632-.035-.822-.035-2.424s.007-1.792.035-2.424c.074-1.615.832-2.386 2.46-2.46.632-.029.822-.034 2.424-.034zm0-1.082c-1.63 0-1.833.007-2.474.037-2.18.1-3.39 1.309-3.49 3.489-.029.641-.036.845-.036 2.474 0 1.63.007 1.834.036 2.474.1 2.179 1.31 3.39 3.49 3.49.641.029.844.036 2.474.036 1.63 0 1.834-.007 2.475-.036 2.176-.1 3.391-1.309 3.489-3.49.029-.64.036-.844.036-2.474 0-1.629-.007-1.833-.036-2.474-.098-2.177-1.309-3.39-3.489-3.489-.641-.03-.845-.037-2.475-.037zm0 2.919c-1.701 0-3.081 1.379-3.081 3.081s1.38 3.081 3.081 3.081 3.081-1.379 3.081-3.081c0-1.701-1.38-3.081-3.081-3.081zm0 5.081c-1.105 0-2-.895-2-2 0-1.104.895-2 2-2 1.104 0 2.001.895 2.001 2s-.897 2-2.001 2zm3.202-5.922c-.397 0-.72.322-.72.72 0 .397.322.72.72.72.398 0 .721-.322.721-.72 0-.398-.322-.72-.721-.72z"/></svg>
</a>
<a href="#" title="...">
<svg class="ico-24 ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 10h-2v2h2v6h3v-6h1.82l.18-2h-2v-.833c0-.478.096-.667.558-.667h1.442v-2.5h-2.404c-1.798 0-2.596.792-2.596 2.308v1.692z"/></svg>
</a>
</div>
</div>
</nav>
Dinamic navbar menu Quickly for WordPress
We have implemented support for our menu, designed to work perfectly with WordPress.Now, you can create dynamic and personalized menus that adapt to your site, improving the navigation experience of your users.
How can I do it to work?
To work, you just need to follow these four steps:
Step 1
For the menu to be correctly displayed, it is necessary to make a small adjustment in the structure of the code in the `Header` file of your template. Simply copy and paste the following code on your subject.
Header.php
<!-- WordPress Menu -->
<nav class="navbar rounded bg-black px-1">
<div class="navbar-container grid align-content-hc" id="navbar1">
<div class="navbar-header">
<button class="navbar-toggle mml-1" aria-label="Toggle navigation">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="navbar-collapse" id="navbar-collapse1">
<?php
wp_nav_menu( array(
'theme_location' => 'menu-header',
'walker' => new Quickly_Nav_Walker(),
'container' => false,
'menu_class' => 'navbar-nav',
'items_wrap' => '<ul class="%2$s">%3$s </ul>',
) );
?>
</div>
</div>
</nav>
Step 2
Includes the following code in the Functions.php file on your WordPress theme.
Function.php
<!-- Add to function.php -->
<?php
require get_template_directory() . '/Quickly_wp_nav_menu_walker.php';
// Register the navigation menu
register_nav_menus( array(
'menu-header' => __( 'Menú Header', '' )
) );
?>
Step 3
Download the quickly_wp_nav_menu_walker.php file and include it at the root of your topic.
DOWNLOADStep 4
Configure your menu in the WordPress administrator, and that's it !Now you can enjoy the Quickly menu in WordPress. Enjoy your menu! 😄