Bootstrap Snippet Custom Navigation bar using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<header class="navigation" id="sticky-nav">
        <div class="container">
    
            <div class="top-logo">
                <a href="#"><img src="https://i.ibb.co/zG54csq/logo.png"></a>
            </div>
        
            
            <nav id='cssmenu' class="navigation">
                <div id="head-mobile"></div>
                <div class="button"></div>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li class="has-sub"><span class="submenu-button"></span><a href="services.html">Services</a>
                        <ul class="sub-menu">
                            <li><a href="services.html">Services</a></li>
                            <li><a href="coaching.html">Coaching</a></li>
                            <li><a href="workshop.html">Workshops</a></li>
                            <li><a href="retreats.html">Retreats</a></li>
                        </ul>
                    </li>
                    <li><a href="delight-clients.html">Delighted Clients</a></li>
                    <li><a href="contact.html">Contact</a></li>
<!--                    <li class="book_trip"><a href="#"><i class="fa fa-map-marker"></i> Book Your Trip</a></li>-->
                </ul>
            </nav>
            
            
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.top-logo {
width: 15%;
float: left;
}
header{
background:#FFEB3B;
color:#fff;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
nav#cssmenu {
text-align: right;
line-height: 0;
}
.navigation.sticky.scrolling nav#cssmenu {
text-align: center;
margin-top: 10px;
float: none;
}
.navigation.sticky.scrolling .open_status {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
   (function($) {
$.fn.menumaker = function(options) {  
 var cssmenu = $(this), settings = $.extend({
   format: "dropdown",
   sticky: false
 }, options);
 return this.each(function() {
   $(this).find(".button").on('click', function(){
     $(this).toggleClass('menu-opened');
     var mainmenu = $(this).next('ul');
     if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open');
     }
     else {
       mainmenu.slideToggle().addClass('open');
       if (settings.format === "dropdown") {
         mainmenu.find('ul').show();
       }
     }
   });
   cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
     cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
     cssmenu.find('.submenu-button').on('click', function() {
       $(this).toggleClass('submenu-opened');
       if ($(this).siblings('ul').hasClass('open')) {
         $(this).siblings('ul').removeClass('open').slideToggle();
       }
       else {
         $(this).siblings('ul').addClass('open').slideToggle();
       }
     });
   };
   if (settings.format === 'multitoggle') multiTg();
   else cssmenu.addClass('dropdown');
   if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Custom Navigation bar"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Related: See More

Questions / Comments:

"Custom Navigation bar" Bootstrap 4.1.1 Snippet by Naveen Mandwariya

Related: See More

Questions / Comments:

"Custom Navigation bar"
Bootstrap 4.1.1 Snippet by Naveen Mandwariya