This tutorial Provides the steps to display the Responsive Menu in all devices and could be useful in some cases.
The Idea:
The idea is to remove the CSS which makes the Navigation Menu to display block and makes the other settings to display inline-block to the right side.
Open style.css file from Genesis Sample theme in any text editor and scroll to the @media only screen and (min-width: 960px) {
and Delete the following (lines 1449 to 1530 in Genesis Sample 2.6.0)
Genesis Sample 2.8.0 line 1396 to 1477.
Genesis Sample 2.9.1 line 1454 to 1535.
Genesis Sample 3.1.0 line 1483 – 1550
Genesis Sample 3.4.0 Line 1486 – 1567
Genesis Sample 3.4.1 Line 1485 – 1566
/* Genesis Menu --------------------------------------------- */ .genesis-nav-menu .menu-item { display: inline-block; } .genesis-nav-menu .menu-item:focus, .genesis-nav-menu .menu-item:hover { position: relative; } .genesis-nav-menu > .menu-bold > a { font-weight: 700; } .genesis-nav-menu > .menu-highlight > a { background-color: #333; border-radius: 3px; color: #fff; font-weight: 600; margin-left: 15px; padding-left: 20px; padding-right: 20px; } .genesis-nav-menu > .menu-highlight > a:hover, .genesis-nav-menu > .menu-highlight > a:focus { background-color: #0073e5; } .genesis-responsive-menu .genesis-nav-menu .sub-menu, .genesis-responsive-menu .genesis-nav-menu .sub-menu a { width: 180px; } .genesis-nav-menu .sub-menu { border-top: 1px solid #eee; opacity: 0; padding-left: 0; position: absolute; transition: opacity .4s ease-in-out; } .genesis-nav-menu .sub-menu a { border: 1px solid #eee; border-top: 0; padding-bottom: 15px; padding-top: 15px; } .genesis-nav-menu .sub-menu .sub-menu { margin: -46px 0 0 179px; } /* Responsive Menu --------------------------------------------- */ .genesis-responsive-menu { display: block; padding-top: 15px; } .menu-toggle, .sub-menu-toggle { display: none; visibility: hidden; } /* Header Menu --------------------------------------------- */ .nav-primary { clear: none; float: right; width: auto; } .nav-primary .genesis-nav-menu a { padding-left: 15px; padding-right: 15px; }
and add some CSS in style.css
.nav-primary { float: none !important; clear: both !important; }
done!