These instructions assume you have either the JetPack plugin active with the Custom CSS module option turned on or our Themedy Toolbox plugin active (version 1.0.3 or higher).

Read more about adding the custom css feature here.


You can these CSS blocks to your Appearance -> Edit CSS screen (see steps above if you don't have this option)

Make sure to start adding your CSS code after the intro text as explained here.

1. Hide toogle menu button & logo area and display menu by default all the time:

.title-area {display: none;}
.nav-primary {display: inline !important;}
.toggle-menu {display: none !important;}
.navigation {background: #133347 !important;}

2. Change menu to non-full width to not cover logo:

.navigation {width: auto; background: #000; height: 50px;}
.nav-primary .menu-primary {float: right;}

3. Menu on desktop site, mobile menu on mobile devices

.nav-primary {
    display: inline ! important;

.toggle-menu {
    display: none ! important;

.navigation {
    background: none repeat scroll 0% 0% #133347 ! important;
    height: 50px;
    width: auto;

.nav-primary .menu-primary {
    float: right;

@media only screen and (max-width: 480px) {
    .toggle-menu { display: block ! important; }
    .navigation { background-color: #000 ! important; width: 100%; height: auto;}
    .nav-primary .menu-primary {float: left;}
    .nav-primary {display: none ! important;} {display: inline ! important;}