3
\$\begingroup\$

I'm trying to have the 3 buttons to each open its own list below whilst closing any current active lists open. I've tried my best with jQuery, but it seems so bloated. Is there a way to streamline this?

At the moment I have a very rough working example: 

/*********************** 
Mobile Menus
*********************************/

(function() {
   var nav = $('.social_icons_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);
        
        return $this.animate({
            'height': 'toggle'
        }, 500);
    }
    
    $('.socialNav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
		$("ul").not(nav).hide();
    	e.preventDefault();
    });
})();	




(function() {
   var nav = $('.dogz_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);
        
        return $this.animate({
            'height': 'toggle'
        }, 500);
    }
    
    $('.dogzNav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
		$("ul").not(nav).hide();
    	e.preventDefault();
    });
})();	

  
  
 (function() {
   var nav = $('.navigation_list ul');
    $.fn.navtoggle = function(speed) {
         var $this = $(this);
        
        return $this.animate({
            'height': 'toggle'
        }, 500);
    }
    
    $('.Nav').on('click', function() {
        nav.stop(true, true).navtoggle(300);
		$("ul").not(nav).hide();
    	e.preventDefault();
    });
})();	 
body{background:#ccc; font-family: 'proxima_nova_rgregular'; color:#524a45; }



.header {height:129px; border-bottom:1px solid #666; }
.header .container {padding:0; }

/*social_icons desktop version*/
.social_icons { float:left; margin-top:25px; width:90%; display:none;}
.social_icons .twitter {float:left; width:24px; height:50px; display:block; margin:0 32px 0 0; background:url(../img/logos_icons/twitter.svg) no-repeat 0 center; }
.social_icons .twitter:hover {background:url(../img/logos_icons/twitter_hover.svg) no-repeat 0 center; cursor:pointer; }
.social_icons .facebook {float:left; width:24px; height:50px; display:block; margin:0 32px 0 0; background:url(../img/logos_icons/fb.svg) no-repeat 0 center; }
.social_icons .facebook:hover {background:url(../img/logos_icons/fb_hover.svg) no-repeat 0 center; cursor:pointer; }
.social_icons .pinterest {float:left; width:24px; height:50px; display:block; margin:0 32px 0 0; background:url(../img/logos_icons/pin.svg) no-repeat 0 center; }
.social_icons .pinterest:hover {background:url(../img/logos_icons/pin_hover.svg) no-repeat 0 center; cursor:pointer; }
.social_icons .instagram {float:left; width:24px; height:50px; display:block; margin:0 32px 0 0; background:url(../img/logos_icons/insta.svg) no-repeat 0 center; }
.social_icons .instagram:hover {background:url(../img/logos_icons/insta_hover.svg) no-repeat 0 center; cursor:pointer; }

.logo {position:absolute; float: left; background:url(../img/logos_icons/logo_mobile.svg) no-repeat center center; width:100%; height:115px; display:block; margin-top:10px;}

.hold {  float: left; width:100%; margin-top: 25px; display:none;}
.bag { float: right; width:47px; height:36px; background:#fff url(../img/logos_icons/bag.svg) no-repeat 7px center; border-radius:5px; border:1px solid #c6c6c5;  padding: 7px; text-align: right;}


.nav {margin: 0; float:left;  width: 100%;}
.navbar-nav > li { float: none; margin: 0;}
.navbar-inverse .navbar-nav > li > a { color: #524a45; text-transform:uppercase; font-family: 'proxima_nova_rgregular'; letter-spacing: 1.5px; padding:15px 15px; }
.dropdown-menu > li > a { color: #524a45; text-transform:uppercase; font-family: 'proxima_nova_rgregular'; letter-spacing: 1.5px;  clear: both; color: #333; display: block; font-weight: normal; line-height: 1.42857;  padding: 20px 20px; white-space: nowrap;}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {color: #524a45; background-color: #fff; }

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {color: #524a45; /*border-bottom:1px solid #524a45;*/ background:#524a45; color:#fff;}
.dropdown-menu {padding:0; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: #efefee;}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { background-color: transparent; color: #524a45;}
.navbar {background:#fff; min-height: 178px;}
.navbar-header { float: none;  background: #fff;}
.navbar-collapse.collapse { }
.navbar.shrink { min-height: 135px;}
.navbar.shrink *{transition:1s; }
.navbar.shrink .header {height: 85px;}
.navbar.shrink .logo {background:url(../img/logos_icons/logo_small.svg)  no-repeat top 10px center; margin:0}
.navbar.shrink .navbar-brand {font-size: 25px;}
.navbar-toggle { display: block;}
.nav > li { display: block; position: relative; }
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form { border: none;}
.navbar-collapse { padding: 0;}
.navbar-inverse .navbar-toggle { border-color: #c6c6c5; border-radius: 5px;}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #524a45;}
.navbar-inverse .navbar-toggle:hover .icon-bar {background-color: #fff;}



/* button mobile social_icons */.navbar-header > .social_icons {display:block; margin: 10px; width:20%; }

.navbar > .social_icons_list ul {display:none; padding:0; margin-top: 10px; width:100%; background: #eee; float: left;}
.navbar > .social_icons_list ul li {display:block; float: none; height: 50px; width:100%; }
.navbar-header > .social_icons a.socialNav { display:block; background:url(../img/logos_icons/mobile_social_icon.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}
.navbar-header > .social_icons a.socialNav:hover {  background:#524a45 url(../img/logos_icons/mobile_social_icon_hover.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}

.social_icons_list ul li a {padding-left: 50px; display: block; height: 50px; padding-left: 50px;  line-height: 50px; color: #524a45; text-transform:uppercase; letter-spacing: 1.5px;}
.social_icons_list .twitter {background:url(../img/logos_icons/twitter.svg) no-repeat 10px center; }
.social_icons_list .twitter:hover {color:#fff; background:#524a45 url(../img/logos_icons/twitter_hover.svg) no-repeat 10px center; cursor:pointer; }
.social_icons_list .facebook {background:url(../img/logos_icons/fb.svg) no-repeat 10px center; }
.social_icons_list .facebook:hover {color:#fff; background:#524a45 url(../img/logos_icons/fb_hover.svg) no-repeat 10px center; cursor:pointer; }
.social_icons_list .pinterest {background:url(../img/logos_icons/pin.svg) no-repeat 10px center; }
.social_icons_list .pinterest:hover {color:#fff; background:#524a45 url(../img/logos_icons/pin_hover.svg) no-repeat 10px center; cursor:pointer; }
.social_icons_list .instagram {background:url(../img/logos_icons/insta.svg) no-repeat 10px center; }
.social_icons_list .instagram:hover {color:#fff; background:#524a45 url(../img/logos_icons/insta_hover.svg) no-repeat 10px center; cursor:pointer; float: left;}



/* button mobile dogz */.navbar-header > .dogz {display:block; margin: 10px; width:20%; float: left;  }

.navbar > .dogz_list {display:block; width:100%; float: left;  }
.navbar > .dogz_list ul {display:none; padding:0; margin-top: 10px; width:100%; background: #eee;}
.navbar > .dogz_list ul ul { padding:0 0 0 20px; margin:0; }
.navbar > .dogz_list ul li {display:block; float: none; width:100%; }
.navbar > .dogz_list ul li > a { color: #524a45; text-transform:uppercase; font-family: 'proxima_nova_rgregular'; letter-spacing: 1.5px;  clear: both; color: #333; display: block; font-weight: normal; line-height: 1.42857;  padding: 15px; white-space: nowrap;}
.navbar > .dogz_list ul li > a:hover { color: #fff; background:#524a45;}

.navbar-header > .dogz a.dogzNav { display:block; background:url(../img/logos_icons/paw.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}
.navbar-header > .dogz a.dogzNav:hover {  background:#524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}
.navbar-header > .hold {  float: left; margin-top: 10px;  width: 20%; display:block; }

.navbar-header > .dogz a.Nav { display:block; background:url(../img/logos_icons/paw.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}
.navbar-header > .dogz a.Nav:hover {  background:#524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center; width:47px; height:36px;  border-radius:5px; border:1px solid #c6c6c5;}

.navbar > .navigation_list {display:block; width:100%; float: left;  }
.navbar > .navigation_list ul {display:none; padding:0; margin-top: 10px; width:100%; background: #eee; }
.navbar > .navigation_list ul li ul {display:none; }
.navbar > .navigation_list ul li ul li a {color: #ccc; }
.navbar > .navigation_list ul ul { padding:0; margin:0; }
.navbar > .navigation_list ul li {display:block; float: none; width:100%; }
.navbar > .navigation_list ul li > a { color: #524a45; text-transform:uppercase; font-family: 'proxima_nova_rgregular'; letter-spacing: 1.5px;  clear: both; color: #333; display: block; font-weight: normal; line-height: 1.42857;  padding: 15px; white-space: nowrap;}
.navbar > .navigation_list ul li > a:hover { color: #fff; background:#524a45;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="header">
        <div class="container">
            <div class="social_icons">
              <a href="#" class="twitter"></a>
              <a href="#" class="facebook"></a>
              <a href="#" class="pinterest"></a>
              <a href="#" class="instagram"></a>
            </div>
            
            <div class="logo"></div>
            
            <div class="hold"><a href="#" class="bag">0</a></div>
        </div>
    </div>
    
    <div class="navbar-header">
    
        <div class="social_icons">
            <a href="#" class="socialNav">social</a>
        </div>
        
        <div class="dogz">
        	<a href="#" class="dogzNav">dognav</a>
        </div>
        
        
        <div class="dogz">
        	<a href="#" class="Nav">nav</a>
        </div>
    </div>
    
    <div class="navigation_list">
        <ul>
            <li><a href="#">About <span class="caret"></span></a>
                <ul>
                    <li><a href="#">FAQ's</a></li>
                    <li><a href="#">Gifting</a></li>
                </ul>
            </li>
            <li><a href="#">Her </a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li><a href="#">His </a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li><a href="#">Our Craft</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    
    
    <div class="social_icons_list">
      <ul>
          <li><a href="#" class="twitter">Tweet  </a></li>
          <li><a href="#" class="facebook">Like  </a></li>
          <li><a href="#" class="pinterest">Pin  </a></li>
          <li><a href="#" class="instagram">Share  </a></li>
      </ul>
    </div>
        
    <div class="dogz_list">
        	<ul>
                <li><a href="#">Her </a></li>
                <li><a href="#">His </a></li>
            </ul>
        </div>
        
        
</div>

            /*********************** 
            Mobile Menus
            *********************************/

            (function() {
               var nav = $('.social_icons_list ul');
                $.fn.navtoggle = function(speed) {
                     var $this = $(this);

                    return $this.animate({
                        'height': 'toggle'
                    }, 500);
                }

                $('.socialNav').on('click', function() {
                    nav.stop(true, true).navtoggle(300);
                    $("ul").not(nav).hide();
                    e.preventDefault();
                });
            })();   




            (function() {
               var nav = $('.dogz_list ul');
                $.fn.navtoggle = function(speed) {
                     var $this = $(this);

                    return $this.animate({
                        'height': 'toggle'
                    }, 500);
                }

                $('.dogzNav').on('click', function() {
                    nav.stop(true, true).navtoggle(300);
                    $("ul").not(nav).hide();
                    e.preventDefault();
                });
            })();   



             (function() {
               var nav = $('.navigation_list ul');
                $.fn.navtoggle = function(speed) {
                     var $this = $(this);

                    return $this.animate({
                        'height': 'toggle'
                    }, 500);
                }

                $('.Nav').on('click', function() {
                    nav.stop(true, true).navtoggle(300);
                    $("ul").not(nav).hide();
                    e.preventDefault();
                });
            })();
\$\endgroup\$
1
  • \$\begingroup\$ Welcome to CR! I've removed the HTML and CSS tags, as your HTML and CSS don't seem to be up for review. Did you know you can embed your fiddle and run the snippet on-site? edit your question and Ctrl+M to add a Stack Snippet! ...then with HTML and CSS as part of the post, the tags could be reinstated ;-) \$\endgroup\$
    – Mathieu Guindon
    Commented Jun 23, 2015 at 14:41

1 Answer 1

Reset to default
1
\$\begingroup\$

Looks like you have one plugin per button which is not really a good idea. You could just have one of the three and polish it with options to work with your buttons. You need to some kind of mapping between the links and ULs and a common class to your ULs. Although I have added simple mapping as data-* to the target links and a common class to ULs, I have not gone ahead and re-organized your entire HTML which you should. I have been using 'A Lightweight Start' plugin pattern from jQuery boilerplate for quite a while now and it's a great way to start authoring plugins.

This pattern is ideal for developers who are either new to plugin development or who just want to achieve something simple (such as a utility plugin). A Lightweight Start uses the following:

  • Common best practices such as a semi-colon placed before the functions invocation
  • jQuery, window, document passed in as arguments.
  • A basic defaults object.
  • A simple plugin constructor for logic related to the initial creation and the assignment of the element to work with.
  • Extending the options with defaults.
  • A lightweight wrapper around the constructor, which helps to avoid issues such as multiple instantiations.
  • Adherence to the jQuery core style guidelines for maximized readability.

Here is your plugin code modified to fit the above mentioned pattern:

;(function ( $, window, document ) {

  // Create the defaults once
  var pluginName = "navtoggle";
  var defaults = {
    selector: ".dropdown ul"
  };

  // The actual plugin constructor
  function Plugin ( element, options ) {
    this.element = element;
    this.settings = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  // Avoid Plugin.prototype conflicts
  $.extend(Plugin.prototype, {

    init: function () {
      // Place initialization logic here
      // The element
      this.$elem = $(this.element);
      // Your code here
      this.toggleMenu();
    },
    toggleMenu: function() {
      var _this = this;
      this.$elem.on("click", function(e) {
        e.preventDefault();
        var relatedMenu = $(this).data("menu");
        var $activeMenu = $([".", relatedMenu, _this.settings.selector].join(''));
        $activeMenu.animate({
          height: 'toggle'
        }, 500);
        $(_this.settings.selector).not($activeMenu).hide();
      });
    }
  });

  // Plugin wrapper around the constructor,
  // Preventing against multiple instantiations
  $.fn[ pluginName ] = function ( options ) {
    this.each(function() {
      if ( !$.data( this, "plugin_" + pluginName ) ) {
        $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
      }
    });
    // Chain jQuery functions
    return this;
  };
})( jQuery, window, document );

//Bind the plugin
$(function() {
    $(".navbar-header").find("a").navtoggle();
});
body {
    background: #ccc;
    font-family: 'proxima_nova_rgregular';
    color: #524a45;
}
.header {
    height: 129px;
    border-bottom: 1px solid #666;
}
.header .container {
    padding: 0;
}
/*social_icons desktop version*/

.social_icons {
    float: left;
    margin-top: 25px;
    width: 90%;
    display: block;
}
.social_icons .twitter {
    float: left;
    width: 24px;
    height: 50px;
    display: block;
    margin: 0 32px 0 0;
    background: url(../img/logos_icons/twitter.svg) no-repeat 0 center;
}
.social_icons .twitter:hover {
    background: url(../img/logos_icons/twitter_hover.svg) no-repeat 0 center;
    cursor: pointer;
}
.social_icons .facebook {
    float: left;
    width: 24px;
    height: 50px;
    display: block;
    margin: 0 32px 0 0;
    background: url(../img/logos_icons/fb.svg) no-repeat 0 center;
}
.social_icons .facebook:hover {
    background: url(../img/logos_icons/fb_hover.svg) no-repeat 0 center;
    cursor: pointer;
}
.social_icons .pinterest {
    float: left;
    width: 24px;
    height: 50px;
    display: block;
    margin: 0 32px 0 0;
    background: url(../img/logos_icons/pin.svg) no-repeat 0 center;
}
.social_icons .pinterest:hover {
    background: url(../img/logos_icons/pin_hover.svg) no-repeat 0 center;
    cursor: pointer;
}
.social_icons .instagram {
    float: left;
    width: 24px;
    height: 50px;
    display: block;
    margin: 0 32px 0 0;
    background: url(../img/logos_icons/insta.svg) no-repeat 0 center;
}
.social_icons .instagram:hover {
    background: url(../img/logos_icons/insta_hover.svg) no-repeat 0 center;
    cursor: pointer;
}
.logo {
    position: absolute;
    float: left;
    background: url(../img/logos_icons/logo_mobile.svg) no-repeat center center;
    width: 100%;
    height: 115px;
    display: block;
    margin-top: 10px;
}
.hold {
    float: left;
    width: 100%;
    margin-top: 25px;
    display: none;
}
.bag {
    float: right;
    width: 47px;
    height: 36px;
    background: #fff url(../img/logos_icons/bag.svg) no-repeat 7px center;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
    padding: 7px;
    text-align: right;
}
.nav {
    margin: 0;
    float: left;
    width: 100%;
}
.navbar-nav > li {
    float: none;
    margin: 0;
}
.navbar-inverse .navbar-nav > li > a {
    color: #524a45;
    text-transform: uppercase;
    font-family: 'proxima_nova_rgregular';
    letter-spacing: 1.5px;
    padding: 15px 15px;
}
.dropdown-menu > li > a {
    color: #524a45;
    text-transform: uppercase;
    font-family: 'proxima_nova_rgregular';
    letter-spacing: 1.5px;
    clear: both;
    color: #333;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding: 20px 20px;
    white-space: nowrap;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #524a45;
    background-color: #fff;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #524a45;
    /*border-bottom:1px solid #524a45;*/
    
    background: #524a45;
    color: #fff;
}
.dropdown-menu {
    padding: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #efefee;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    background-color: transparent;
    color: #524a45;
}
.navbar {
    background: #fff;
    min-height: 178px;
}
.navbar-header {
    float: none;
    background: #fff;
}
.navbar-collapse.collapse {} .navbar.shrink {
    min-height: 135px;
}
.navbar.shrink * {
    transition: 1s;
}
.navbar.shrink .header {
    height: 85px;
}
.navbar.shrink .logo {
    background: url(../img/logos_icons/logo_small.svg) no-repeat top 10px center;
    margin: 0
}
.navbar.shrink .navbar-brand {
    font-size: 25px;
}
.navbar-toggle {
    display: block;
}
.nav > li {
    display: block;
    position: relative;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border: none;
}
.navbar-collapse {
    padding: 0;
}
.navbar-inverse .navbar-toggle {
    border-color: #c6c6c5;
    border-radius: 5px;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #524a45;
}
.navbar-inverse .navbar-toggle:hover .icon-bar {
    background-color: #fff;
}
/* button mobile social_icons */

.navbar-header > .social_icons {
    display: block;
    margin: 10px;
    width: 20%;
}
.navbar > .social_icons_list ul {
    display: none;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    background: #eee;
    float: left;
}
.navbar > .social_icons_list ul li {
    display: block;
    float: none;
    height: 50px;
    width: 100%;
}
.navbar-header > .social_icons a.socialNav {
    display: block;
    background: url(../img/logos_icons/mobile_social_icon.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.navbar-header > .social_icons a.socialNav:hover {
    background: #524a45 url(../img/logos_icons/mobile_social_icon_hover.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.social_icons_list ul li a {
    padding-left: 50px;
    display: block;
    height: 50px;
    padding-left: 50px;
    line-height: 50px;
    color: #524a45;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.social_icons_list .twitter {
    background: url(../img/logos_icons/twitter.svg) no-repeat 10px center;
}
.social_icons_list .twitter:hover {
    color: #fff;
    background: #524a45 url(../img/logos_icons/twitter_hover.svg) no-repeat 10px center;
    cursor: pointer;
}
.social_icons_list .facebook {
    background: url(../img/logos_icons/fb.svg) no-repeat 10px center;
}
.social_icons_list .facebook:hover {
    color: #fff;
    background: #524a45 url(../img/logos_icons/fb_hover.svg) no-repeat 10px center;
    cursor: pointer;
}
.social_icons_list .pinterest {
    background: url(../img/logos_icons/pin.svg) no-repeat 10px center;
}
.social_icons_list .pinterest:hover {
    color: #fff;
    background: #524a45 url(../img/logos_icons/pin_hover.svg) no-repeat 10px center;
    cursor: pointer;
}
.social_icons_list .instagram {
    background: url(../img/logos_icons/insta.svg) no-repeat 10px center;
}
.social_icons_list .instagram:hover {
    color: #fff;
    background: #524a45 url(../img/logos_icons/insta_hover.svg) no-repeat 10px center;
    cursor: pointer;
    float: left;
}
/* button mobile dogz */

.navbar-header > .dogz {
    display: block;
    margin: 10px;
    width: 20%;
    float: left;
}
.navbar > .dogz_list {
    display: block;
    width: 100%;
    float: left;
}
.navbar > .dogz_list ul {
    display: none;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    background: #eee;
}
.navbar > .dogz_list ul ul {
    padding: 0 0 0 20px;
    margin: 0;
}
.navbar > .dogz_list ul li {
    display: block;
    float: none;
    width: 100%;
}
.navbar > .dogz_list ul li > a {
    color: #524a45;
    text-transform: uppercase;
    font-family: 'proxima_nova_rgregular';
    letter-spacing: 1.5px;
    clear: both;
    color: #333;
    display: block;
    font-weight: normal;
    line-height: 1.42857;
    padding: 15px;
    white-space: nowrap;
}
.navbar > .dogz_list ul li > a:hover {
    color: #fff;
    background: #524a45;
}
.navbar-header > .dogz a.dogzNav {
    display: block;
    background: url(../img/logos_icons/paw.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.navbar-header > .dogz a.dogzNav:hover {
    background: #524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.navbar-header > .hold {
    float: left;
    margin-top: 10px;
    width: 20%;
    display: block;
}
.navbar-header > .dogz a.Nav {
    display: block;
    background: url(../img/logos_icons/paw.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.navbar-header > .dogz a.Nav:hover {
    background: #524a45 url(../img/logos_icons/paw_hover.svg) no-repeat center center;
    width: 47px;
    height: 36px;
    border-radius: 5px;
    border: 1px solid #c6c6c5;
}
.navbar > .navigation_list {
    display: block;
    width: 100%;
    float: left;
}
.navbar > .navigation_list ul {
    display: none;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    background: #eee;
}
.navbar > .navigation_list ul li ul {
    display: none;
}
.navbar > .navigation_list ul li ul li a {
    color: #ccc;
}
.navbar > .navigation_list ul ul {
    padding: 0;
    margin: 0;
}
.navbar > .navigation_list ul li {
    display: block;
    float: none;
    width: 100%;
}
.navbar > .navigation_list ul li > a {
    color: #524a45;
    text-transform: uppercase;
    font-family: 'proxima_nova_rgregular';
    letter-spacing: 1.5px;
    clear: both;
    color: #333;
    font-weight: normal;
    line-height: 1.42857;
    padding: 15px;
    white-space: nowrap;
}
.navbar > .navigation_list ul li > a:hover {
    color: #fff;
    background: #524a45;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

  <div class="navbar-header">
    <div class="social_icons">
      <a href="#" class="socialNav" data-menu="social">social</a>
    </div>
    <div class="dogz">
      <a href="#" class="dogzNav" data-menu="dogz">dognav</a>
    </div>
    <div class="dogz">
      <a href="#" class="Nav" data-menu="navigation">nav</a>
    </div>
  </div>

  <div class="navigation_list navigation dropdown">
    <ul>
      <li><a href="#">About <span class="caret"></span></a>
        <ul>
          <li><a href="#">FAQ's</a></li>
          <li><a href="#">Gifting</a></li>
        </ul>
      </li>
      <li><a href="#">Her </a>
        <ul>
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
        </ul>
      </li>
      <li><a href="#">His </a>
        <ul>
          <li><a href="#">Product 1</a></li>
          <li><a href="#">Product 2</a></li>
          <li><a href="#">Product 3</a></li>
        </ul>
      </li>
      <li><a href="#">Our Craft</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>


  <div class="social_icons_list social dropdown">
    <ul>
      <li><a href="#" class="twitter">Tweet  </a></li>
      <li><a href="#" class="facebook">Like  </a></li>
      <li><a href="#" class="pinterest">Pin  </a></li>
      <li><a href="#" class="instagram">Share  </a></li>
    </ul>
  </div>

  <div class="dogz_list dogz dropdown">
    <ul>
      <li><a href="#">Her </a></li>
      <li><a href="#">His </a></li>
    </ul>
  </div>
</div>

Here is an updated fiddle, just in case, with all the code.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.