Hi Karwan Mino!
Try adding this css to your child theme:
.home {
margin-top: 15%;
}
.site-header {
position: fixed;
background: whitesmoke;
top: 0;
right: 0;
left: 0;
z-index: 99;
}
.menu-toggle {
margin-top: 5%;
}
Get back to me if you need any more help. Glad I could help you, Karwan.
Cheers
Øyvind
[Signature moderated]
hello dear touchCoding!
i did add that css to the style.css finely worked !
BUT it made navigation ready freeze to the top ! i really want something like X ‘s navigation try to see …
best regards dear !
please if you know let me i make my navigation as theme let help me
__ THANKS
Hi Karwan!
I’m sorry, but I don’t understand what you are really after here. By “sticky” I though you meant fixed to the top. Can you please explain what you’re after.
thanks
Øyvind
[Signature moderated]
Hi master,
i mean make my navigation such as THISWEBSITE! i want my nav like that site sticky when scroll’s down nav go up and then stay stick at top
or: i try this but i dont know why not works correctly please help
regards
If you want that, you need to apply som jquery to trigger the css I give you only when you have scrolled down to a certain point. But the same code as I provided.
Cheers
Øyvind
[Signature moderated]
i tried much more i see in tutorials that other people made is working from them in same ways i try here but not working for me i don’t know why !!
i use local network __
i want make the same nav menu of X theme ( http://www.theme.co/x/ ) i have a copy of the theme but don’t know how to apply the sticky nav also the search section in same way and the logo indide nav menu __
please tell me step by step i dont know how fix these problems
thanks bro for your help
Try this jQuery(add it to your script file or create a new one):
$(document).ready(function () {
var menu = $('.menu');
var origOffsetY = menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Edit the classes and this should give you the effect you were looking for 🙂
