Sticky Menu & Header width issue

[Alesya]

Alesya

December 28, 2015 at 8:43 am

Ben and Hannah, hi again!

I have two issues:

1) Sticky menu code isn’t working for me for some reason. The whole header sticks, including logo.
I’ve tried this code from other forum topics:

A)<script type=”text/javascript”>
jQuery(document).ready(function ($) {
var topOffest = $(‘body’).hasClass(‘admin-bar’) ? 32 : 0;
$(‘.navclass’).sticky({topSpacing:topOffest});});
</script>

.navclass {
width: 100%;
margin: 0 auto;
left: 0;
z-index:9000;
}

B) And this one (as I’d like to add image logo in future to the menu)

<script type=”text/javascript”>
jQuery(document).ready(function ($) {
var topOffest = $(‘body’).hasClass(‘admin-bar’) ? 32 : 0;
$(‘#nav-main’).sticky({topSpacing:topOffest});});
</script>

.sticky-wrapper > #nav-main ul.sf-menu {
float: none;
text-align: center;
}
.sticky-wrapper > #nav-main{
padding: 10px 0;
}
.sticky-wrapper > #nav-main .sf-menu>li {
display: inline-block;
float: none;
}
.is-sticky #nav-main {
margin: 0;
background: rgba(255, 255, 255, 0.5) none repeat scroll 0% 0%;
width:1170px;
}
.headerclass > .container {
width: 100%;
}
.kad-header-right {
padding: 0;
}
.sticky-wrapper.is-sticky > #nav-main .sf-menu:before {
content: ”;
height: 40px;
overflow: hidden;
position: absolute;
float: left;
display: block;
margin-left: 20px;
width: 150px;
}

@media (max-width: 1200px){
.is-sticky #nav-main {
width:940px;
}
}

@media (max-width: 768px) and (device-width: 768px) {
.kad-header-right .sticky-wrapper {
display:none !important;
}

How do I make Menu only stick at the top?

2) For some reason my header gets cut on the right side when it’s sticky. Could you please let me know how to fix that? http://www.forestharp.com