.

DOCS

Layout :

Quick Start
Containers
Grids

Elements :

Lists
Subpage Indicator
NavBars
Bars
Articles
Area
Buttons

Helpers :

Horizontal Separator
Vertical Separator

NAVBAR

Classical with Logo (White)

                            

<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>

Example

An example of a classical navbar with Logo (White)


Classical with Logo (Black)

                            

<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>

Example

An example of a classical navbar with Logo (Black)

Classical with Logo and Right Nav (White)

                            

<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>

Example

An example of a classical navbar with Logo and Right Nav (White)

Classical with Logo and Right Nav (Black)

                            

<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>

Example

An example of a classical navbar with Logo and Right Nav (Black)

Vertical navbar with Logo (White)

                            

<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>

Example

An example of a vertical navbar with Logo (White)

Vertical navbar with Logo (Black)

                            

<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>

Example

An example of a vertical navbar with Logo (Black)