{"id":692,"date":"2023-01-16T04:20:15","date_gmt":"2023-01-16T01:20:15","guid":{"rendered":"https:\/\/melic.com\/wp1\/?p=692"},"modified":"2023-01-16T04:21:25","modified_gmt":"2023-01-16T01:21:25","slug":"sabitlenmis-navbar","status":"publish","type":"post","link":"https:\/\/melic.com\/wp1\/sabitlenmis-navbar\/","title":{"rendered":"Sabitlenmi\u015f Navbar"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Eminim hepiniz web sayfas\u0131 tasarlarken en \u00e7ok kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z rahats\u0131z edici durumlardan bir tanesi men\u00fcn\u00fcz\u00fcn sitede gezerken kaybolmas\u0131 ve sadece bunun i\u00e7in bir plugin ya da js kodu aramak zorunda kalman\u0131zd\u0131r.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c7o\u011fu kimsenin CSS kodlar\u0131nda ne kadar \u00e7ok gizli m\u00fccevherler oldu\u011funu bilmedi\u011fini biliyorum. Ben bile sayfalarca ve defalarca CSS hakk\u0131nda bir \u00e7ok makale , arg\u00fcman, vs okumama ra\u011fmen g\u00f6z\u00fcmden ka\u00e7\u0131rd\u0131\u011f\u0131m bu kodu sizinle payla\u015fmak istedim :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>position: sticky;\ntop:0;\nz-index: 9999;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Konu ile ilgili olarak <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/position\" target=\"_blank\">MDN (Mozilla Developers Nerwork)<\/a> g\u00fczel bir a\u00e7\u0131klama yapm\u0131\u015f. L\u00fctfen RTFM !<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/melic.com\/wp1\/wp-content\/uploads\/2023\/01\/position_statik-460x274.png\" alt=\"\" class=\"wp-image-693\" width=\"820\" height=\"488\" srcset=\"https:\/\/melic.com\/wp1\/wp-content\/uploads\/2023\/01\/position_statik-460x274.png 460w, https:\/\/melic.com\/wp1\/wp-content\/uploads\/2023\/01\/position_statik-200x119.png 200w, https:\/\/melic.com\/wp1\/wp-content\/uploads\/2023\/01\/position_statik-768x458.png 768w, https:\/\/melic.com\/wp1\/wp-content\/uploads\/2023\/01\/position_statik.png 786w\" sizes=\"auto, (max-width: 820px) 100vw, 820px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz kodu position: static; yazan yere yazd\u0131\u011f\u0131n\u0131zda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlama f\u0131rsat\u0131 yakalayacaks\u0131n\u0131z.Esas\u0131nda hangi uygulamay\u0131 ya da yaz\u0131l\u0131m\u0131 kullan\u0131yorsan\u0131z kullan\u0131n , e\u011fer HTML ve CSS kullan\u0131yorsa ve siz koda m\u00fcdahele edebiliyorsan\u0131z tek yapman\u0131z gereken do\u011fru class veya Id tag&#8217;ini ile bu kodu eklemeniz yeterli.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Mesela bir WordPress tasar\u0131m\u0131nda https:\/\/sitenizinadresi.com\/wp-admin\/customize.php adresine gidip Ek CSS alan\u0131na a\u015fa\u011f\u0131daki kodu yap\u0131\u015ft\u0131r\u0131p kaydetmeniz durumunda header olarak tan\u0131ml\u0131 olan blok sayfan\u0131z\u0131n hep en \u00fcst\u00fcnde as\u0131l\u0131 kalacakt\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>header\n{\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 9999;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Tabi siz isterseniz header yerine kendi sistenizde tan\u0131ml\u0131 olan class ya da Id bilgisine g\u00f6re de tan\u0131mlayabilirsiniz.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Elbette responsive bir site e\u011fer bu i\u015flemin mobil ekranlarda yani 768px alt\u0131na d\u00fc\u015ft\u00fc\u011f\u00fcnde de ayn\u0131 tepkiyi vermesini istemiyorsan\u0131z CSS d\u00fczenlemenizi \u015fu \u015fekilde yapmal\u0131s\u0131n\u0131z :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@media screen and (min-width :768px){\n   header\n   {\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 9999;\n   }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Mutlu tasar\u0131mlar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eminim hepiniz web sayfas\u0131 tasarlarken en \u00e7ok kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131z rahats\u0131z edici durumlardan bir tanesi men\u00fcn\u00fcz\u00fcn sitede gezerken kaybolmas\u0131 ve sadece bunun i\u00e7in bir plugin ya da js kodu aramak zorunda kalman\u0131zd\u0131r. \u00c7o\u011fu kimsenin CSS kodlar\u0131nda ne kadar \u00e7ok gizli m\u00fccevherler oldu\u011funu bilmedi\u011fini biliyorum. Ben bile sayfalarca ve defalarca CSS hakk\u0131nda bir&#8230;<\/p>\n","protected":false},"author":1,"featured_media":224,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57,1,94],"tags":[],"class_list":["post-692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-html","category-genel","category-web-arayuzleri"],"_links":{"self":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/comments?post=692"}],"version-history":[{"count":1,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/692\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/posts\/692\/revisions\/694"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/media?parent=692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/categories?post=692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/melic.com\/wp1\/wp-json\/wp\/v2\/tags?post=692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}