Title: Menu bar colour Last modified: August 22, 2018 --- # Menu bar colour * [robertc1993](https://wordpress.org/support/users/robertc1993/) * (@robertc1993) * [7 years, 10 months ago](https://wordpress.org/support/topic/menu-bar-colour/) * I need help changing the background colour from white to black. * Any advice welcome. Viewing 3 replies - 1 through 3 (of 3 total) * [AddWeb Solution](https://wordpress.org/support/users/addweb-solution-pvt-ltd/) * (@addweb-solution-pvt-ltd) * [7 years, 10 months ago](https://wordpress.org/support/topic/menu-bar-colour/#post-10616415) * Hi, * Please share URL or code reference for better understanding * Thread Starter [robertc1993](https://wordpress.org/support/users/robertc1993/) * (@robertc1993) * [7 years, 10 months ago](https://wordpress.org/support/topic/menu-bar-colour/#post-10616448) * [http://Www.zanshinni.co.uk/](http://Www.zanshinni.co.uk/) it is currently got a coming soon plugin. * Thread Starter [robertc1993](https://wordpress.org/support/users/robertc1993/) * (@robertc1993) * [7 years, 10 months ago](https://wordpress.org/support/topic/menu-bar-colour/#post-10616584) * [@media](https://wordpress.org/support/users/media/) (min-width: 768px) { .nav > li > a:before { position: absolute; content: ”; bottom: 0; left: 50%; width: 0; height: 2px; background-color: #010101; -webkit-transition: all 1s; transition: all 1s; } .nav > li:hover > a:before { width: 100%; left: 0; } .navbar-nav > li > a { padding-top: 20px; padding-bottom: 20px; transition: all 0.5s ease-in- out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease- in-out; -o-transition: all 0.5s ease-in-out; } .shrink .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; font-size: 14px; } .navbar-nav li:hover. dropdown-menu{ visibility:visible; border-top: 4px solid #ccc; border-radius: 0; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; - webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}# site-navigation .container{ padding-left: 0; padding-right: 0; } .navbar-default. navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar- default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; } .navbar-center .navbar-nav{ display: inline-block; float: none; vertical-align: top; } * .navbar-center .menu-container { text-align: center; } } [@media](https://wordpress.org/support/users/media/)( min-width: 600px) { .admin-bar #site-navigation.shrink { top: 32px; } } [@media](https://wordpress.org/support/users/media/)( max-width: 767px) { .nav > li.active > a:after, .current-page-parent:after { height: 0 !important; background-color: transparent !important; } .navbar-nav a:hover, .navbar-nav a:focus { color: #B22222 !important; background-color: # 010101 !important; } .menu-container { width: 70%; position: absolute; left: 0; transform: translate3d(-100%, 0, 0); overflow-y: auto; overflow-x: auto; height: 100vh; padding-bottom: 60px; z-index: 9; background-color: #010101; top: 60px;}. shrink .menu-container { top: 50px; } .openNav .menu-container { transform: translate3d( 0, 0, 0); transition: transform 500ms ease; } .openNav .page-area { left: 0; transform: translate3d(70%, 0, 0); transition: transform 500ms ease; } .page- area { left: 0; transform: translate3d(0, 0, 0); transition: transform 500ms ease; } .navbar-nav { padding: 0; margin: 0; } .navbar-nav a { font-size: 14px; padding: 15px 10px !important; margin: 0 !important; line-height: 16px !important; background-color:#010101; float: left !important width: 100%; text-transform: none !important; word-wrap: break-word; white-space: normal !important; } .navbar- nav li, .navbar-nav ul { padding: 0px !important; margin: 0px !important; } . open-panel { width: 32px; height: 32px; position: absolute; top: 18px; right: 22px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; - moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: . 5s ease-in-out; cursor: pointer; } .shrink .open-panel { top: 12px; } .open-panel span { display: block; position: absolute; height: 3px; width: 100%; background:# 000; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate( 0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition:. 25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease- in-out; transition: .25s ease-in-out; } .open-panel span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center;- o-transform-origin: left center; transform-origin: left center; } .open-panel span:nth-child(2) { top: 9px; -webkit-transform-origin: left center; -moz-transform- origin: left center; -o-transform-origin: left center; transform-origin: left center; } .open-panel span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .open-panel.open span:nth-child(1) { -webkit- transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate( 45deg); transform: rotate(45deg); top: -2px; left: 3px; } .open-panel.open span: nth-child(2) { width: 0%; opacity: 0; } .open-panel.open span:nth-child(3) { - webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 21px; left: 3px; } .caret, .dropdown- submenu>a:after { display: none !important; } .navbar-nav .dropdown-menu { width: 100%; display: block !important; left: 0 !important; position: relative !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none! important; } .openNav .page-area:after { content: ”; position: absolute; top: 0; right: 0; bottom: 0; background-color: #00000085; left: 0; } .split-images. news-text-wrap h2 { font-size: 100%; } } .dropdown-menu > li > a { border-bottom: 0; } #site-navigation { min-height: 60px; } .navbar-collapse { padding-left: 0; padding-right: 0; } .dropdown-submenu { position: relative; } * .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin- left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } * .dropdown-submenu:hover>.dropdown-menu { display: block; } * .dropdown-submenu>a:after { display: block; content: ” “; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } * .dropdown-submenu:hover>a:after { border-left-color: #fff; } * .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown- menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; - moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {   background-color: #010101; } .navbar-toggle { border: 1px solid # ccc; } .navbar-toggle .icon-bar { background-color: #ccc; } .navbar-nav > li > a { border-bottom: 0; text-transform: uppercase; } .nav > li.active > a:after,. current-page-parent:after { position: absolute; content: ”; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #010101; } article { clear: both; float: left; margin-bottom: 10px; width: 100%; } .updated:not(.published) { display: none; } .space-right { margin-right: 10px; } Viewing 3 replies - 1 through 3 (of 3 total) The topic ‘Menu bar colour’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/head-blog/1.1.2/screenshot.png) * Head Blog * [Support Threads](https://wordpress.org/support/theme/head-blog/) * [Active Topics](https://wordpress.org/support/theme/head-blog/active/) * [Unresolved Topics](https://wordpress.org/support/theme/head-blog/unresolved/) * [Reviews](https://wordpress.org/support/theme/head-blog/reviews/) * 3 replies * 2 participants * Last reply from: [robertc1993](https://wordpress.org/support/users/robertc1993/) * Last activity: [7 years, 10 months ago](https://wordpress.org/support/topic/menu-bar-colour/#post-10616584) * Status: not resolved