sticky navbar

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 ( https://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 ??