Hide sticky menu on mobile

[vicentembd1]

I used this tutorial and sticky menu works well... (THEME AGENT PRESS)

http://my.studiopress.com/tutorials/sticky-menu/

but I don´t want use sticky menu on mobile phone...

Any suggestion?

http://www.castillodesagunto.com

[Jon Schroeder]

Are you wanting that menu to be there, but not sticky, or are you wanting to remove it entirely?

If you'd like to just be rid of it completely, here's a snippet to add at the end of your stylesheet which should hide it for everyone viewing the site at a width below 767px:

@media (max-width:767px) {
#subnav { position: absolute;left: -999px;top: -999px;}
}

[vicentembd1]

Hello Jon.. thanks for you support...

I want remove only sticky.

I´ve changed but it doesn´t work.. but I´m not sure if I do it well:

Thants is the code I put in my stylessheet:

FILE: style.css
FOLDER: wp-content/themes/agentpress-pro
NEW URL: http://www.construccionesjp.es (I use to test)

CODE TUTORIAL (http://my.studiopress.com/tutorials/sticky-menu/)
************************
/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
background-color: #333;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}

.nav-secondary .genesis-nav-menu a {
padding: 20px;
padding: 2rem;
}

.nav-secondary .genesis-nav-menu .sub-menu a {
padding: 16px 20px;
padding: 1.6rem 2rem;
}

.nav-secondary a:hover,
.nav-secondary .current-menu-item > a,
.nav-secondary .menu-item-home > a,
.nav-secondary .menu-item-home > a:hover {
color: #fff;
}

.nav-secondary .sub-menu a:hover {
color: #333;
}

.nav-secondary .sticky-right {
float: right;
}

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

.nav-secondary .sticky-right {
float: none;
}

}

****************************

NEW CODE

**********************
/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
background-color: #002859;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;

}

.nav-secondary .genesis-nav-menu a {
padding: 20px;
padding: 2rem;
color: #fff; /* antes nada*/
}

.nav-secondary .genesis-nav-menu .sub-menu a {
padding: 16px 20px;
padding: 1.6rem 2rem;
}

.nav-secondary a:hover,
.nav-secondary .current-menu-item > a,
.nav-secondary .menu-item-home > a,
.nav-secondary .menu-item-home > a:hover {
color: #fff;
}

.nav-secondary .sub-menu a:hover {
color: #fff;
}

.nav-secondary .sticky-right {
float: right;
}

@media (max-width:767px) {
#subnav { position: absolute;left: -999px;top: -999px;}

}

*******************************

Thank you very much!!

[vicentembd1]

Anyone That Could help me? 🙂

[Jon Schroeder]

Try this, then:

@media (max-width:767px) {
.nav-secondary { position:static !important; }
}

See if that does what you're wanting.

[vicentembd1]

Hello Jon:

You are the best!!! It´s work :-)!!!

Now, Sticky appears at the end of the web, affter footer, but It´s ok for me

Thank you, thank you, thank you 🙂

SUMMARY

FILE: style.css
FOLDER: wp-content/themes/agentpress-pro
CODE:
*******************
/* Secondary Navigation
--------------------------------------------- */

.nav-secondary {
background-color: #002859;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;

}

.nav-secondary .genesis-nav-menu a {
padding: 20px;
padding: 2rem;
color: #fff; /* antes nada*/
}

.nav-secondary .genesis-nav-menu .sub-menu a {
padding: 16px 20px;
padding: 1.6rem 2rem;
}

.nav-secondary a:hover,
.nav-secondary .current-menu-item > a,
.nav-secondary .menu-item-home > a,
.nav-secondary .menu-item-home > a:hover {
color: #fff;
}

.nav-secondary .sub-menu a:hover {
color: #fff;
}

.nav-secondary .sticky-right {
float: right;
}

@media (max-width:767px) {
.nav-secondary { position:static !important; }

******************************************

[Author]

Posts