{"id":375309,"date":"2023-07-17T02:53:42","date_gmt":"2023-07-17T02:53:42","guid":{"rendered":"https:\/\/wordpress.org\/patterns\/?post_type=wporg-pattern&#038;p=375309"},"modified":"2023-07-17T02:53:42","modified_gmt":"2023-07-17T02:53:42","slug":"header-with-nav-sticky-background-and-quote","status":"publish","type":"wporg-pattern","link":"https:\/\/it.wordpress.org\/patterns\/pattern\/header-with-nav-sticky-background-and-quote\/","title":{"rendered":"Header with nav, sticky background and quote"},"content":{"rendered":"\n<header class=\"wp-block-cover alignfull has-parallax\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);min-height:390px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim\"><\/span><div role=\"img\" class=\"wp-block-cover__image-background has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZmwzMjYyOTc1NTMwMS1pbWFnZS1rdmx1ZDFxZC5qcGc.jpg)\"><\/div><div class=\"wp-block-cover__inner-container is-layout-flow wp-container-core-cover-is-layout-05ed98f9 wp-block-cover-is-layout-flow\">\n<div class=\"wp-block-group has-background is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-af480da9 wp-block-group-is-layout-flex\" style=\"border-radius:0px;background-color:#0000006e\"><div class=\"wp-block-site-logo\"><span class=\"custom-logo-link\"><img decoding=\"async\" src=\"https:\/\/s.w.org\/images\/wmark.png\" class=\"custom-logo\" alt=\"Logo del sito\"><\/span><\/div>\n\n<h1 class=\"wp-block-site-title has-medium-font-size\"><a href=\"https:\/\/it.wordpress.org\/patterns\" target=\"_self\" rel=\"home\">Pattern<\/a><\/h1>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" \/>\n\n\n<nav class=\"is-responsive items-justified-right wp-block-navigation is-horizontal is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-a0b40bfd wp-block-navigation-is-layout-flex\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Apri menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 7.5h16v1.5H4z\"><\/path><path d=\"M4 15h16v1.5H4z\"><\/path><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Chiudi menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t<ul class=\"wp-block-navigation__container is-responsive items-justified-right wp-block-navigation\"><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Home<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">About<\/span><\/a><\/li><li class=\"wp-block-navigation-item wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"#\"><span class=\"wp-block-navigation-item__label\">Contact<\/span><\/a><\/li><\/ul>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav><\/div>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-d77c890b wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default has-background is-layout-flow wp-block-quote-is-layout-flow\" style=\"background:linear-gradient(100deg,rgb(0,0,0) 31%,rgba(9,9,9,0) 61%);font-style:normal;font-weight:300\">\n<p class=\"wp-block-paragraph\"><code>The standard Lorem Ipsum passage<\/code><\/p>\n<cite><em>&#8220;Lorem Ipsum is simply dummy text of the printing and typesetting industry.&#8221;<\/em><\/cite><\/blockquote>\n<\/div><\/header>\n","protected":false},"author":14948465,"parent":0,"template":"","meta":{"wpop_keywords":"","wpop_description":"Header with logo, site name, navigation, sticky background and quote.","wpop_viewport_width":800,"wpop_block_types":[],"wpop_locale":"en_US","wpop_wp_version":"","wpop_contains_block_types":"core\/cover,core\/group,core\/navigation,core\/paragraph,core\/quote,core\/separator,core\/site-logo,core\/site-title,core\/spacer","footnotes":""},"pattern-categories":[60,5],"pattern-keywords":[],"wporg-pattern-flag-reason":[],"class_list":["post-375309","wporg-pattern","type-wporg-pattern","status-publish","hentry","wporg-pattern-category-banner","wporg-pattern-category-header"],"category_slugs":["banner","header"],"keyword_slugs":[],"pattern_content":"<!-- wp:cover {\"url\":\"https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZmwzMjYyOTc1NTMwMS1pbWFnZS1rdmx1ZDFxZC5qcGc.jpg\",\"hasParallax\":true,\"dimRatio\":30,\"minHeight\":390,\"minHeightUnit\":\"px\",\"contentPosition\":\"center center\",\"tagName\":\"header\",\"align\":\"full\",\"style\":{\"spacing\":{\"blockGap\":\"0\",\"padding\":{\"top\":\"var:preset|spacing|40\",\"right\":\"var:preset|spacing|40\",\"bottom\":\"var:preset|spacing|40\",\"left\":\"var:preset|spacing|40\"}}},\"layout\":{\"type\":\"default\"}} -->\n<header class=\"wp-block-cover alignfull has-parallax\" style=\"padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);min-height:390px\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim-30 has-background-dim\"><\/span><div role=\"img\" class=\"wp-block-cover__image-background has-parallax\" style=\"background-position:50% 50%;background-image:url(https:\/\/images.rawpixel.com\/image_1300\/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvZmwzMjYyOTc1NTMwMS1pbWFnZS1rdmx1ZDFxZC5qcGc.jpg)\"><\/div><div class=\"wp-block-cover__inner-container\"><!-- wp:group {\"style\":{\"border\":{\"radius\":\"0px\"},\"color\":{\"background\":\"#0000006e\"}},\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"justifyContent\":\"left\"}} -->\n<div class=\"wp-block-group has-background\" style=\"border-radius:0px;background-color:#0000006e\"><!-- wp:site-logo {\"width\":100} \/-->\n\n<!-- wp:site-title {\"fontSize\":\"medium\"} \/-->\n\n<!-- wp:separator {\"style\":{\"layout\":{\"selfStretch\":\"fit\"}},\"className\":\"is-style-dots\"} -->\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\" \/>\n<!-- \/wp:separator -->\n\n<!-- wp:navigation {\"layout\":{\"type\":\"flex\",\"justifyContent\":\"right\",\"flexWrap\":\"wrap\",\"orientation\":\"horizontal\"},\"style\":{\"spacing\":{\"blockGap\":\"var:preset|spacing|30\"}}} \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"0\",\"padding\":{\"top\":\"0\",\"right\":\"0\",\"bottom\":\"0\",\"left\":\"0\"}}},\"layout\":{\"type\":\"flex\",\"orientation\":\"vertical\"}} -->\n<div class=\"wp-block-group\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\"><!-- wp:spacer {\"height\":\"140px\"} -->\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<!-- \/wp:spacer --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:quote {\"style\":{\"typography\":{\"fontStyle\":\"normal\",\"fontWeight\":\"300\"},\"color\":{\"gradient\":\"linear-gradient(100deg,rgb(0,0,0) 31%,rgba(9,9,9,0) 61%)\"}},\"className\":\"is-style-default\"} -->\n<blockquote class=\"wp-block-quote is-style-default has-background\" style=\"background:linear-gradient(100deg,rgb(0,0,0) 31%,rgba(9,9,9,0) 61%);font-style:normal;font-weight:300\"><!-- wp:paragraph -->\n<p><code>The standard Lorem Ipsum passage<\/code><\/p>\n<!-- \/wp:paragraph --><cite><em>\"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\"<\/em><\/cite><\/blockquote>\n<!-- \/wp:quote --><\/div><\/header>\n<!-- \/wp:cover -->","favorite_count":14,"author_meta":{"name":"Blase Beczkowski","url":"https:\/\/it.wordpress.org\/patterns\/author\/beczkowski","avatar":"https:\/\/secure.gravatar.com\/avatar\/dd01823657befc3494387ddb4dc57862f71a6e99f537d231aa6ef0b6fd8807f9?s=64&d=mm&r=g"},"unlisted_reason":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/375309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern"}],"about":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/types\/wporg-pattern"}],"version-history":[{"count":44,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/375309\/revisions"}],"predecessor-version":[{"id":375563,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern\/375309\/revisions\/375563"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wporg\/v1\/users\/beczkowski"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/media?parent=375309"}],"wp:term":[{"taxonomy":"wporg-pattern-category","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-categories?post=375309"},{"taxonomy":"wporg-pattern-keyword","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/pattern-keywords?post=375309"},{"taxonomy":"wporg-pattern-flag-reason","embeddable":true,"href":"https:\/\/it.wordpress.org\/patterns\/wp-json\/wp\/v2\/wporg-pattern-flag-reason?post=375309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}