[John Chadwick]

I'm not using Sixteen Nine Pro but I figured this out for Enterprise PRO.

I only wanted the responsive menu on anything below a 480 width.

In the CSS I commented out anything to do with .genesis-nav-menu.responsive-menu under the media query - @media only screen and (max-width: 768px).

I then created a new media query - @media only screen and (max-width: 480px) and added all the relevant .genesis-nav-menu.responsive-menu under that media query.

Tested on various devices and works fine.

John Chadwick

Commented / re-added code as follows;

.genesis-nav-menu.responsive-menu,
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu {
display: none;
}

.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}

.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}

.genesis-nav-menu.responsive-menu li a,
.genesis-nav-menu.responsive-menu li a:hover {
background: none;
border: none;
display: block;
line-height: 1;
padding: 16px 20px;
text-transform: none;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}

.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}

.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 15px 20px;
right: 0;
text-align: right;
z-index: 9999;
}

.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}

.genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.05);
border: none;
left: auto;
opacity: 1;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}

.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
padding: 12px 20px;
position: relative;
text-transform: none;
width: 100%;
}

.nav-primary .genesis-nav-menu.responsive-menu {
padding-bottom: 16px;
}

.nav-primary .genesis-nav-menu.responsive-menu .sub-menu {
background-color: rgba(0, 0, 0, 0.07);
}

.genesis-nav-menu.responsive-menu .sub-menu .sub-menu,
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
background-color: transparent;
margin: 0;
padding-left: 25px;
}

[John Chadwick]

In a Lifestyle theme and noticed the Genesis 2.1.1 upgrade was available. Took a swing and swish! Primary and secondary nav are back in play. Thank you to those who have clearly spent countless and seldom rewarded hours working on this......they are much appreciated.

Best Regards

John Chadwick

[John Chadwick]

Hi Gary and Andrea!

I am creating a bunch of niche blogs for other users and before I go live with them I would like to know if this issue is going to be fixed as a new release? All the niche blogs use the pre HTML5 Lifestyle theme. I can't release them knowing that a potential owner will have to go into the core code and edit it. I guess I could edit one of the installs and then clone it but could the next Genesis update knock out the secondary nav again? Thanks for your hard work on the new update........love Genesis!

Kind regards,

John

[John Chadwick]

Hi Brightisland,

I am afraid I have had to revert the build site back to basic Lifestyle theme as that's the way teh client wants it. When I have finished the work I will set up a dummy theme and repost the code to change the widgets on the Lifestyle pro home page (front-page)

The code I have already posted will work, I just can't show it for the moment.

Kind regards

John Chadwick

[John Chadwick]

Hi Brightisland,

I am in the middle of a build site which can be seen here. The site has been modified to add an extra widget to the home page whilst maintaining the default widgets.

You will need to edit the following files of your child theme...I have posted my new edits;

front-page.php
functions.php
style.css

Edit FRONT-PAGE.PHP by adding the emboldened code;

function lifestyle_home_genesis_meta() {

if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-bottom-left' ) || is_active_sidebar( 'home-bottom-right' ) || is_active_sidebar( 'home-extra' ) ) {

// Force content-sidebar layout setting
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' );

// Add lifestyle-pro-home body class
add_filter( 'body_class', 'lifestyle_body_class' );

// Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

// Add homepage widgets
add_action( 'genesis_loop', 'lifestyle_homepage_widgets' );

// FNB CUSTOM - add extra home page widget
add_action( 'genesis_loop', 'fnb_homepage_widgets' );

}
}

function lifestyle_homepage_widgets() {

genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-middle', array(
'before' => '<div class="home-middle widget-area">',
'after' => '</div>',
) );

if ( is_active_sidebar( 'home-bottom-left' ) || is_active_sidebar( 'home-bottom-right' ) ) {

echo '<div class="home-bottom">';

genesis_widget_area( 'home-bottom-left', array(
'before' => '<div class="home-bottom-left widget-area">',
'after' => '</div>',
) );

genesis_widget_area( 'home-bottom-right', array(
'before' => '<div class="home-bottom-right widget-area">',
'after' => '</div>',
) );

echo '</div>';

}
}

//FNB CUSTOM - Added Home Extra widget area
function fnb_homepage_widgets() {

genesis_widget_area( 'home-extra', array(
'before' => '<div class="home-extra widget-area">',
'after' => '</div>',
) );

}

Edit FUNCTIONS.PHP by adding the emboldened code;

//* FNB CUSTOM - Register Home Extra Area
genesis_register_sidebar( array(
'id' => 'home-extra',
'name' => __( 'Home - Extra', 'fastnicheblogstheme' ),
'description' => __( 'This is the home page extra widget area', 'fastnicheblogstheme' ),
) );

EDIT STYLE.CSS by adding;

/*FNB CUSTOM for Home Extra widget*/
.home-extra {
float:left;
}

I hope the above helps

Kind Regards

John Chadwick

[John Chadwick]

I have managed to create an extra widget area on the home page underneath the bottom-left and bottom-right widgets. I had to edit the functions.php, front-page.php and the style.css. I can post a solution here if anitac has not already provided the answer?

[Author]

Posts