html - Navbar is not coming in pug

Question

I am a beginner and trying to put my navbar as permanent in base layout. I am using youtube for it but as I am learning back end and according to my course, the navbar should appear as permanent irrespective of the changes in the linked pages in the site but it is not working.

Base Layout File

doctype html
html
  head
    title DevilisHere
    block scripts
    block style

  Body
    block content
            nav#navbar
                    div#container
                        img(src = "../static/bg.png")
                            ul
                                li #[a(href = "/") Home]
                                li #[a(href = "/") Devil] 
                                li #[a(href = "/") Devils Address]
                                li #[a(href = "/") Contact Devil]
                    div#logotag
                        h6  DevilIsHere
           
    block foot
        footer.foot
            h3.headline Copyright ? 2020 DevilisHere | All Rights Reserved

Home File //

extends layout.pug

block scripts
    script(src="../static/index.js")

block style
       style
        include ../static/navbar.css
        include ../static/section1.css 
        include ../static/section2.css
        include ../static/section3.css 
        include ../static/footer.css

block content   
        section#firstSection
            div.heading1 
                p.headline Welcome to Devils Mansion
            div.tag2 
                p Come Prepared To Die

        section#secondSection
            p.headline.head2 Opt For a Remembrable Death.
            div.heading2 
                div.card
                    h3.headline.cardhead Specialised in Peaceful Death 
                    img(src= "../static/sec21.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Have killed Billions
                    img(src= "../static/sec22.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Experienced in Breaking Bones
                    img(src= "../static/sec23.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Extra Caution with Body Art
                    img(src= "../static/sec24.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                

        section#thirdSection
            h3.headline.logohead You can Submit Your Death Requests Here.
            div.logosection
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")

In the above code Navbar is not showing when loading the file in browser even the navbar is being in the base layout.

Answer 1

See the docs about Template Inheritance.

nav#navbar is a default content.

...
Body
    block content
            nav#navbar
...

But it's getting over written by section#firstSection

...
block content   
        section#firstSection
...

Restructure and place nav#navbar as a sibling of block content:

doctype html
html
head
    title DevilisHere
    block scripts
    block style

Body
    
    nav#navbar
        div#container
            img(src = "../static/bg.png")
                ul
                    li #[a(href = "/") Home]
                    li #[a(href = "/") Devil] 
                    li #[a(href = "/") Devils Address]
                    li #[a(href = "/") Contact Devil]
        div#logotag
            h6  DevilIsHere

    block content
        
    block foot
        footer.foot
            h3.headline Copyright ? 2020 DevilisHere | All Rights Reserved