SDCCS: Header Navigation

Documentation:

HTML:

<!-- Header Navigation --> <nav role="navigation"> <div class="navbar"> <div class="container"> <!-- .navbar-toggle is used as the toggle for collapsed navbar content --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><img src="<?php the_field('logo','option'); ?>" /></a> </div> <div class="navbar-collapse collapse navbar-responsive-collapse"> <?php bones_main_nav(); ?> </div> </div> </div> </nav>

CSS:

/* Header Navigation */ .navbar { background-color: white; border: none; padding: 15px 0; li { border-right: 1px solid black; &:last-child { border-right: none; } } li > a { color: #34353a; font-size: 16px; margin: 0 25px; padding: 0; } img { max-height: 150px; width: auto; } }

JS:

// Header Navigation function centering_main_navigation_menu() { var menu_height = $('#menu-main-menu').height(); var navbar_height = $('.navbar').height(); var margin_value = navbar_height/2 - menu_height/2; $('#menu-main-menu').css('margin-top', margin_value); } centering_main_navigation_menu();