Changing responsive breakpoints on Sixteen Nine Pro

[GeoffW]

Hi Guys,

I'd like to narrow the responsive breakpoint on the Sixteen Nine Pro Child Theme for computer browsers so that the menu stays on the side longer. I tried changing the max-width from 1279px to 1000px (below) but it broke the site and nothing looked right. I get the sense that I have to change several variables. I'm very green, just getting started with CSS. Any help would be greatly appreciated! Thanks

@media only screen and (max-width: 1279px)

http://Developing locally with MAMP, so no URL.

[GeoffW]

I got help with this. And it's completed.

[frankie1tree]

Hi
I'm trying for the same solution, can you advise how you resolved this?
Many thanks.

[ScottFromPA]

Ladies and Gents,

Please please please always post your solution so other can benefit from it.

Our solution are others gold.

[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;
}

[addiesgram]

GeoffW, I'd sure like to know the solution you found. I have the same issue with Sixteen Nine.

[Author]

Posts