{"id":15140,"date":"2023-04-24T00:00:00","date_gmt":"2023-04-24T00:00:00","guid":{"rendered":"https:\/\/megnyitasa.com\/tudas\/achieving-a-perfect-layout-how-to-get-the-navigation-bar-under-the-header-in-css-2\/"},"modified":"2023-04-24T00:00:00","modified_gmt":"2023-04-24T00:00:00","slug":"achieving-a-perfect-layout-how-to-get-the-navigation-bar-under-the-header-in-css-2","status":"publish","type":"post","link":"https:\/\/megnyitasa.com\/tudas\/achieving-a-perfect-layout-how-to-get-the-navigation-bar-under-the-header-in-css-2\/","title":{"rendered":"Achieving a Perfect Layout: How to Get the Navigation Bar Under the Header in CSS"},"content":{"rendered":"<div class=\"articlecontent\">\n<div class=\"newlinediv\"><\/div>\n<p> CSS, or Cascading Style Sheets, plays a significant role in web design. It is responsible for the layout, styling, and positioning of website elements. One of the most common layout structures is having the navigation bar below the header. This layout is not only aesthetically pleasing but also functional. In this article, we will discuss how to get the navigation bar under the header in CSS. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> First, let&#8217;s understand the basic HTML structure of a typical web page. The <\/p>\n<header> tag contains the header content, such as the logo, tagline, and other important information about the website. The <\/p>\n<nav> tag contains the navigation bar or menu items. The <\/p>\n<div> tag, on the other hand, is a container for other HTML elements, including the header and navigation bar. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> To get the navigation bar under the header, we need to use CSS to manipulate the positioning and layout of these elements. Ennek egyik m\u00f3dja a position tulajdons\u00e1g haszn\u00e1lata. A <\/p>\n<nav> tag poz\u00edci\u00f3 tulajdons\u00e1g\u00e1t &#8222;abszol\u00fat&#8221;, a <\/p>\n<header> tag\u00e9t pedig &#8222;relat\u00edv&#8221; \u00e9rt\u00e9kre \u00e1ll\u00edthatjuk. Ez\u00e1ltal a <\/p>\n<nav> tag a <\/p>\n<header> taghez viszony\u00edtva poz\u00edcion\u00e1lja mag\u00e1t. <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> header { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> position: relative; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> nav { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> position: absolute; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> top: 100%; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> A fenti k\u00f3dban a fejl\u00e9c poz\u00edci\u00f3j\u00e1t relat\u00edvra \u00e1ll\u00edtjuk, ami azt jelenti, hogy a <\/p>\n<nav> tag a fejl\u00e9chez k\u00e9pest fogja mag\u00e1t poz\u00edcion\u00e1lni. A <\/p>\n<nav> tag poz\u00edci\u00f3j\u00e1t is abszol\u00fatra \u00e1ll\u00edtjuk, ami azt jelenti, hogy a legk\u00f6zelebbi poz\u00edcion\u00e1lt \u0151s\u00e9hez, ebben az esetben a <\/p>\n<header> taghez k\u00e9pest fog elhelyezkedni. A <\/p>\n<nav> c\u00edmke fels\u0151 tulajdons\u00e1g\u00e1t is 100%-ra \u00e1ll\u00edtjuk, ami azt jelenti, hogy a <\/p>\n<header> c\u00edmke alj\u00e1ra ker\u00fcl. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Egy m\u00e1sik m\u00f3dja ennek az elrendez\u00e9snek a megval\u00f3s\u00edt\u00e1s\u00e1ra a flexbox elrendez\u00e9s haszn\u00e1lata. A flexbox egy hat\u00e9kony CSS elrendez\u00e9si modul, amely lehet\u0151v\u00e9 teszi sz\u00e1munkra, hogy rugalmas \u00e9s reszponz\u00edv elrendez\u00e9seket hozzunk l\u00e9tre. A flexbox elrendez\u00e9ssel a fejl\u00e9cet \u00e9s a navig\u00e1ci\u00f3s s\u00e1vot egy sorba helyezhetj\u00fck, majd a navig\u00e1ci\u00f3s s\u00e1vot alulra igaz\u00edthatjuk. <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> .header { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> display: flex; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> flex-direction: row; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> justify-content: space-between; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> align-items: center; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } } <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> .nav { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> align-self: flex-end; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> A fenti k\u00f3dban a <\/p>\n<header> tag display tulajdons\u00e1g\u00e1t flex-re, a flex-direction tulajdons\u00e1g\u00e1t pedig row-ra \u00e1ll\u00edtjuk. Ez\u00e1ltal a fejl\u00e9c \u00e9s a navig\u00e1ci\u00f3s s\u00e1v egy sorban jelenik meg. A justify-content tulajdons\u00e1got is space-between \u00e9rt\u00e9kre \u00e1ll\u00edtjuk, ami a fejl\u00e9c \u00e9s a navig\u00e1ci\u00f3s s\u00e1v k\u00f6z\u00f6tt sz\u00f3k\u00f6zt hoz l\u00e9tre. V\u00e9g\u00fcl az align-items tulajdons\u00e1got centerre \u00e1ll\u00edtjuk, ami a fejl\u00e9c tartalm\u00e1t k\u00f6z\u00e9pre \u00e1ll\u00edtja. <\/p>\n<div class=\"title\"> A <\/p>\n<nav> tag eset\u00e9ben az align-self tulajdons\u00e1got flex-end-re \u00e1ll\u00edtjuk, ami a navig\u00e1ci\u00f3s s\u00e1vot a <\/p>\n<header> tag alj\u00e1ra igaz\u00edtja. <\/div>\n<p> \u00d6sszefoglalva, a navig\u00e1ci\u00f3s s\u00e1v CSS-ben a fejl\u00e9c al\u00e1 helyez\u00e9se nem neh\u00e9z feladat. Ezt az elrendez\u00e9st a position tulajdons\u00e1ggal vagy a flexbox elrendez\u00e9ssel \u00e9rhetj\u00fck el. By manipulating the positioning and layout of these elements using CSS, we can create a visually appealing and functional website layout.<\/p><\/div>\n<div class=\"questions\">\n<div class=\"questionstitle\">FAQ<\/div>\n<div class=\"question\">\n<div class=\"qtitle\"> How do you spread the navigation bar in CSS?<\/div>\n<p> To spread the navigation bar in CSS, you can use the &#8222;display&#8221; property and the &#8222;flex&#8221; value. The &#8222;flex&#8221; value allows you to create flexible layouts that adjust to different screen sizes and resolutions. Here&#8217;s the code: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 1. First, create a navigation bar element in your HTML code, and give it a class or an ID: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<nav class=\"navbar\">\n<div class=\"newlinediv\"><\/div>\n<ul>\n<div class=\"newlinediv\"><\/div>\n<li><a href=\"#\">Home<\/a><\/li>\n<div class=\"newlinediv\"><\/div>\n<li><a href=\"#\">About<\/a><\/li>\n<div class=\"newlinediv\"><\/div>\n<li><a href=\"#\">Contact<\/a><\/li>\n<div class=\"newlinediv\"><\/div>\n<\/ul>\n<div class=\"newlinediv\"><\/div>\n<\/nav>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 2. In your CSS code, target the navigation bar element and set the &#8222;display&#8221; property to &#8222;flex&#8221;: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> .navbar { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> display: flex; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 3. By default, the items inside the navigation bar will be aligned to the left. To center them, you can add the &#8222;justify-content&#8221; property and set its value to &#8222;center&#8221;: <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> .navbar { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> display: flex; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> justify-content: center; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 4. A &#8222;gap&#8221; tulajdons\u00e1g haszn\u00e1lat\u00e1val n\u00e9mi t\u00e1vols\u00e1got is hozz\u00e1adhat az elemek k\u00f6z\u00f6tt. Ez a tulajdons\u00e1g \u00e1ll\u00edtja be az elemek k\u00f6z\u00f6tti t\u00e1vols\u00e1got: <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> .navbar { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> display: flex; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> justify-content: center; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> gap: 1rem; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 5. V\u00e9g\u00fcl tov\u00e1bbi CSS-k\u00f3d hozz\u00e1ad\u00e1s\u00e1val testre szabhatja a navig\u00e1ci\u00f3s s\u00e1v megjelen\u00e9s\u00e9t, p\u00e9ld\u00e1ul a bet\u0171m\u00e9ret, a sz\u00edn, a h\u00e1tt\u00e9r stb. megv\u00e1ltoztat\u00e1s\u00e1val. <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> .navbar { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> display: flex; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> justify-content: center; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> gap: 1rem; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> font-size: 1.2rem; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> background: #333; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> color: #fff; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> .navbar a { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> text-decoration: none; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> color: inherit; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> Ezeknek a CSS-tulajdons\u00e1goknak a haszn\u00e1lat\u00e1val rugalmasan \u00e9s testre szabhat\u00f3 m\u00f3don terjesztheti el a navig\u00e1ci\u00f3s s\u00e1vot. <\/p>\n<\/div>\n<div class=\"question\">\n<div class=\"qtitle\"> Hogyan lehet a navig\u00e1ci\u00f3s s\u00e1vot alulra helyezni?<\/div>\n<p> A navig\u00e1ci\u00f3s s\u00e1vnak a weboldal alj\u00e1n t\u00f6rt\u00e9n\u0151 elhelyez\u00e9s\u00e9hez a CSS (Cascading Style Sheets) seg\u00edts\u00e9g\u00e9vel alak\u00edthatja ki a navig\u00e1ci\u00f3s s\u00e1vot. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Az al\u00e1bbi l\u00e9p\u00e9seket k\u00f6vetheti: <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 1. El\u0151sz\u00f6r hozzon l\u00e9tre egy kont\u00e9ner div-t, amely a weboldal teljes tartalm\u00e1t tartalmazza. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 2. A kont\u00e9ner div-en bel\u00fcl hozzon l\u00e9tre egy m\u00e1sodik div-et, amely az oldal f\u0151 tartalm\u00e1t fogja tartalmazni. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 3. A m\u00e1sodik div l\u00e9trehoz\u00e1sa ut\u00e1n hozzon l\u00e9tre egy harmadik div-t, amely a navig\u00e1ci\u00f3s s\u00e1vot fogja tartalmazni. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 4. Most adjunk CSS-t a harmadik div (navig\u00e1ci\u00f3s s\u00e1v) st\u00edlus\u00e1hoz, \u00e9s helyezz\u00fck a kont\u00e9ner div alj\u00e1ra. Haszn\u00e1lhatja a k\u00f6vetkez\u0151 CSS-k\u00f3dot: <\/p>\n<div class=\"newlinediv\"><\/div>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;&#8222; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> #navbar { <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> position: fixed; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> bottom: 0; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> width: 100%; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> background-color: #333; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> color: #fff; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> text-align: center; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> padding: 10px; <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> } <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> &#8222;` <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> A fenti k\u00f3dban a &#8222;position: fixed&#8221; azt jelenti, hogy a navig\u00e1ci\u00f3s s\u00e1v az oldal alj\u00e1n lesz r\u00f6gz\u00edtve, m\u00e9g akkor is, ha a felhaszn\u00e1l\u00f3 g\u00f6rget. &#8222;bottom: 0&#8221; azt jelenti, hogy a navig\u00e1ci\u00f3s s\u00e1v a kont\u00e9ner div alj\u00e1ra ker\u00fcl. &#8222;width: 100%&#8221; azt jelenti, hogy a navig\u00e1ci\u00f3s s\u00e1v a kont\u00e9ner div teljes sz\u00e9less\u00e9g\u00e9t elfoglalja. A t\u00f6bbi CSS-tulajdons\u00e1got, p\u00e9ld\u00e1ul a h\u00e1tt\u00e9rsz\u00ednt, a sz\u00f6veg sz\u00edn\u00e9t, a kit\u00f6lt\u00e9st stb. a designnak megfelel\u0151en \u00e1ll\u00edthatja be. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> 5. V\u00e9g\u00fcl adja hozz\u00e1 a navig\u00e1ci\u00f3s linkeket vagy men\u00fcelemeket a navbar div-hez. <\/p>\n<div class=\"newlinediv\"><\/div>\n<p> Ha ezeket a l\u00e9p\u00e9seket k\u00f6veti, k\u00f6nnyen elhelyezheti a navig\u00e1ci\u00f3s s\u00e1vot a weboldal alj\u00e1n.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS, or Cascading Style Sheets, plays a significant role in web design. It is responsible for the layout, styling, and positioning of website elements. One of the most common layout structures is having the navigation bar below the header. This layout is not only aesthetically pleasing but also functional. In this article, we will discuss &#8230; <a title=\"Achieving a Perfect Layout: How to Get the Navigation Bar Under the Header in CSS\" class=\"read-more\" href=\"https:\/\/megnyitasa.com\/tudas\/achieving-a-perfect-layout-how-to-get-the-navigation-bar-under-the-header-in-css-2\/\" aria-label=\"Read more about Achieving a Perfect Layout: How to Get the Navigation Bar Under the Header in CSS\">Read more<\/a><\/p>\n","protected":false},"author":4640,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52],"tags":[],"class_list":["post-15140","post","type-post","status-publish","format-standard","hentry","category-types-of-businesses-to-start"],"_links":{"self":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts\/15140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/users\/4640"}],"replies":[{"embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/comments?post=15140"}],"version-history":[{"count":0,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/posts\/15140\/revisions"}],"wp:attachment":[{"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/media?parent=15140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/categories?post=15140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/megnyitasa.com\/tudas\/wp-json\/wp\/v2\/tags?post=15140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}