.

DOCS

Mise en page :

Démarrage rapide
Conteneurs
Grilles

Elements :

Listes
Indicateur de sous-page
Barres de navigation
Barres
Articles
Zones
Boutons

Assistants :

Séparateurs horizontaux
Séparateurs verticaux

BARRE DE NAVIGATION

Classique avec logo (blanc)

                            

<section class="navigation-complete-logo" id="nav-color-white">


                            
<section class="container-lg">

                    
                                
<section class="navigation-container">

                    
                                    
<section style="display: flex;align-items: center;"><section class="navItem"><a href="#"><img src="logo.png" alt="logo"></a></section>

                                    
<section class="navButton" id="navBtn" style="margin-left: auto;margin-right: 40px;"><a onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone-black.png" style="width: 30px;height: auto;"></a></section></section>

                                    
<section id="links">

                                    
<section class="navItem"><a href="#"><span class="actual-nav-white"><h4>Home</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Presentation</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
</section>

                                    
 </section>

                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation classique avec logo (blanc)


Classique avec logo (noir)

                            

<section class="navigation-complete-logo" id="nav-color-black">


                            
<section class="container-lg">

                    
                                
<section class="navigation-container">

                    
                                    
<section style="display: flex;align-items: center;"><section class="navItem"><a href="#"><img src="logo.png" alt="logo"></a></section>

                                    
<section class="navButton" id="navBtn" style="margin-left: auto;margin-right: 40px;"><a onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone.png" style="width: 30px;height: auto;"></a></section></section>

                                    
<section id="links">

                                    
<section class="navItem"><a href="#"><span class="actual-nav-black"><h4>Home</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Presentation</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
</section>

                                    
 </section>

                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation classique avec logo (noir)

Classique avec logo et Navigation à droite (blanc)

                            

<section class="navigation-complete-logo" id="nav-color-white">


                            
<section class="container-lg">

                    
                                
<section class="navigation-container">

                    
                                    
<section style="display: flex;align-items: center;"><section class="navItem"><a href="#"><img src="logo.png" alt="logo"></a></section>

                                    
<section class="navButton" id="navBtn" style="margin-left: auto;margin-right: 40px;"><a onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone-black.png" style="width: 30px;height: auto;"></a></section></section>

                                    
<section id="links">

                                    
<section class="navItem"><a href="#"><span class="actual-nav-white"><h4>Home</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Presentation</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
<section class="right-nav">

                                    
<section class="navItem"><a href="#"><h4>My Account</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
</section>

                                    
</section>

                                    
 </section>

                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation classique avec logo et Navigation à droite (blanc)

Classique avec logo et Navigation à droite (noir)

                            

<section class="navigation-complete-logo" id="nav-color-black">


                            
<section class="container-lg">

                    
                                
<section class="navigation-container">

                    
                                    
<section style="display: flex;align-items: center;"><section class="navItem"><a href="#"><img src="logo.png" alt="logo"></a></section>

                                    
<section class="navButton" id="navBtn" style="margin-left: auto;margin-right: 40px;"><a onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone.png" style="width: 30px;height: auto;"></a></section></section>

                                    
<section id="links">

                                    
<section class="navItem"><a href="#"><span class="actual-nav-black"><h4>Home</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Presentation</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
<section class="right-nav">

                                    
<section class="navItem"><a href="#"><h4>My Account</h4></a></section>

                                    
<section class="navItem"><a href="#"><h4>Contact</h4></a></section>

                                    
</section>

                                    
</section>

                                    
 </section>

                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation classique avec logo et Navigation à droite (noir)

Barre de navigation verticale avec logo (blanc)

                            

<section class="navigation-complete-logo" id="nav-color-white">


                            
<section class="container-lg">

                
                                
<section class="navigation-container">

                
                                    
<section style="display: flex;align-items: center;" class="navItem-logo-center"><section><a href="test.html"><img src="logo" alt="logo" style="margin-top:5px;"></a></section>

                                    
                                    
<section class="navButton" id="navBtn" style="margin-left:auto;margin:left:40px"><a style="margin-left:auto;margin:left:50px" onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone-black.png" style="width: 30px;height: auto;margin-right:40px;"></a></section></section>

                
                                
</section>

                                
                                
<section class="navigation-container-center">

                                
                                
<section id="links">

                                
                                    
<section class="navItem-center"><a href="test.html"><span class="actual-nav-white"><h4>Home</h4></a></section>

                                    
<section class="navItem-center"><a href="test.html"><h4>Home</h4></a></section>

                                    
<section class="navItem-center"><a href="test.html"><h4>Home</h4></a></section>

                                
                                
</section>

                                
                                
</section>

                                                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation verticale avec logo (blanc)

Barre de navigation verticale avec logo (noir)

                            

<section class="navigation-complete-logo" id="nav-color-black">


                            
<section class="container-lg">

                
                                
<section class="navigation-container">

                
                                    
<section style="display: flex;align-items: center;" class="navItem-logo-center"><section><a href="test.html"><img src="logo" alt="logo" style="margin-top:5px;"></a></section>

                                    
                                    
<section class="navButton" id="navBtn" style="margin-left:auto;margin:left:40px"><a style="margin-left:auto;margin:left:50px" onclick="JavaScript:navMenu()"><img src="https://software.webba-creative.com/wss/icones/navPhone.png" style="width: 30px;height: auto;margin-right:40px;"></a></section></section>

                
                                
</section>

                                
                                
<section class="navigation-container-center">

                                
                                
<section id="links">

                                
                                    
<section class="navItem-center"><a href="test.html"><span class="actual-nav-black"><h4>Home</h4></a></section>

                                    
<section class="navItem-center"><a href="test.html"><h4>Home</h4></a></section>

                                    
<section class="navItem-center"><a href="test.html"><h4>Home</h4></a></section>

                                
                                
</section>

                                
                                
</section>

                                                    
                                
</section>

                    
                                
</section>

Exemple

Un exemple de barre de navigation verticale avec logo (noir)