A couple of weeks ago, I released both the Malcolm and Marcus child themes for the Genesis framework. One of the popular features of both themes is the so-called sticky nav – the primary navigation that stays fixed to the top of the page as you scroll down.
Although most users seem to like it a few of you have asked how to unstick the menu so that it doesn’t stay fixed at the top. If this sounds like you then read on.
The process is actually quite easy and involves just a few modifications to the style sheet.
Malcolm
1. Download Malcolm’s style.css file to your hard drive, make a backup of it then open it in a plain text editor. Personally I like either Programmer’s Notepad or Notepad++.
2. At about line 84 you’ll see the following …
body {
background-color: #fff;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
padding-top: 82px;
}
3. The part that needs to be changed is highlighted red. You can either delete that line or comment it out. In fact, I recommend simply commenting it out so that if some point down the road you change your mind and want to revert back it will be easy to do so.
4. That line should now look like this …
body {
background-color: #fff;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
/*padding-top: 82px;*/
}
5. Next scroll down to about line 1263 where you’ll see this …
.nav-primary {
background-color: #333;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ddd;
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
body.admin-bar .nav-primary {
top: 28px;
}
6. Once again comment out the lines I highlighted red. It should now look like this …
.nav-primary {
background-color: #333;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ddd;
/*position: fixed;*/
/*top: 0;*/
/*width: 100%;*/
/*z-index: 2000;*/
}
body.admin-bar .nav-primary {
/*top: 28px;*/
}
7. The final step. Scroll even further down near the bottom to about line 3053 where you’ll see this …
@media only screen and (max-width: 767px) {
body {
padding-top: 0;
}
}
8. This line is the final change you need to make. After you comment it out it should look like this …
@media only screen and (max-width: 767px) {
body {
/*padding-top: 0;*/
}
}
That’s all there is to it. You can copy/paste directly from here if you like.
Marcus
1. Download Marcus’s style.css file to your hard drive, make a backup of it then open it in a plain text editor. Personally I like either Programmer’s Notepad or Notepad++.
2. At about line 84 you’ll see the following …
body {
background-color: #f5f5f5;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
padding-top: 82px;
}
3. The part that needs to be changed is highlighted red. You can either delete that line or comment it out. In fact, I recommend simply commenting it out so that if some point down the road you change your mind and want to revert back it will be easy to do so.
4. That line should now look like this …
body {
background-color: #f5f5f5;
color: #666;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
/*padding-top: 82px;*/
}
5. Next scroll down to about line 1264 where you’ll see this …
.nav-primary {
background-color: #333;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ddd;
position: fixed;
top: 0;
width: 100%;
z-index: 2000;
}
body.admin-bar .nav-primary {
top: 28px;
}
6. Once again comment out the lines I highlighted red. It should now look like this …
.nav-primary {
background-color: #333;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ddd;
/*position: fixed;*/
/*top: 0;*/
/*width: 100%;*/
/*z-index: 2000;*/
}
body.admin-bar .nav-primary {
/*top: 28px;*/
}
7. The final step. Scroll even further down near the bottom to about line 3098 where you’ll see this …
@media only screen and (max-width: 767px) {
body {
padding-top: 0;
}
}
8. This line is the final change you need to make. After you comment it out it should look like this …
@media only screen and (max-width: 767px) {
body {
/*padding-top: 0;*/
}
}
That’s all there is to it. You can copy/paste directly from here if you like.
No comments: