Skip to main content
Participant
October 21, 2019
Question

how to insert a logo and navigation bar on top of a header image?

  • October 21, 2019
  • 1 reply
  • 3846 views

I am trying to get a logo and a navigation bar at the top of the image.  This image is my header image in Dreamweaver.  I have other things I want to overlay under the headline in the image.  Please advise.

 

I

    This topic has been closed for replies.

    1 reply

    Nancy OShea
    Community Expert
    Community Expert
    October 21, 2019

    Use a background image in your <header>    See if this helps you.

     

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Unique Page Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    margin: 0;
    font-family: Avant Garde, Avantgarde, Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    font-size: 20px;
    }
    header > * {
    margin: 0;
    padding: 0;
    }
    header {
    background: url(https://placeimg.com/1200/200/nature)no-repeat top center;
    min-height: 200px;
    text-align: center;
    }
    header h1 {
    padding-top: 5%;
    color: #222;
    }
    header h2 {
    color: #973100;
    font-family: script, fantasy, cursive, serif;
    }
    main {
    width:75%;
    margin:0 auto;
    }
    </style>
    </head>
    <body>
    
    <nav>NAVIGATION GOES HERE</nav>
    <header>
    <h1>My Awesome Website</h1>
    <h2>Some Pithy Slogan...</h2>
    </header>
    
    <main>
    <h3>Heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo optio porro velit, accusamus, consequuntur architecto! Explicabo ipsa cupiditate provident. Illum, aut, commodi? Voluptates</p>
    </main>
    
    <footer>
    Footer goes here...
    </footer>
    </body>
    </html>

     

     

    Nancy O'Shea— Product User & Community Expert
    Participant
    October 21, 2019

    I have the image in my file it is not a website image.  I was talking about having Home About Us and etc on the image up top not but not at the exact top just a little ways down.  I am wanting it to look like this. This is a part of my mock-up of the website I am trying to develop in Dreamweaver.

     

    BenPleysier
    Community Expert
    Community Expert
    October 21, 2019

    Copy and paste the following into a new document.

    <!doctype html>
    <html><head>
      <base href="/aa/">
      <meta name="ac:base" content="/aa">
      <meta charset="UTF-8">
      <title>Untitled Document</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      <style>
      html {
          min-height: 100%;
          margin-left: calc(100vw - 100%);
          }
          body {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          }
          main {
          flex: 1 0 auto;
        }
      </style>
      </head>
      <body>
        <header class="bg-light">
          <div class="container">
            <div class="row">
              <div class="col">
                <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
                  <a class="navbar-brand mr-auto ml-auto" href="#">Navbar</a>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                  </button>
                  <div class="collapse navbar-collapse justify-content-center" id="navbar1_collapse">
                    <div class="navbar-nav">
                      <a class="nav-item nav-link active" href="#">Home</a>
                      <a class="nav-item nav-link" href="#">About</a>
                      <a class="nav-item nav-link" href="#">Contact</a>
                    </div>
                  </div>
                </nav>      </div>
            </div>
          </div>
        </header>
        <main class="d-flex justify-content-center align-items-center">
          <h1>Welcome to Buy My House Greenville</h1>
        </main>
        <footer>
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-6 align-self-md-end">
                <h4>Are you..</h4>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
                <p>A nice paragraph</p>
              </div>
              <div class="col-12 col-md-6">
                <div class="container">
                  <form id="register1">
                    <div class="row justify-content-center">
                      <div class="col-12 col-md-8 col-lg-8 col-xl-6">
                        <div class="row">
                          <div class="col text-center">
                            <h4>Register</h4>
                            <p class="text-h3">Enter your registration details below.</p>
                          </div>
                        </div>
                        <div class="row align-items-center">
                          <div class="col mt-4">
                            <input type="text" id="inp_company" name="company" class="form-control" placeholder="Company Name">
                          </div>
                        </div>
                        <div class="row align-items-center mt-4">
                          <div class="col">
                            <input type="email" id="inp_email" name="email" class="form-control" placeholder="Email">
                          </div>
                        </div>
                        <div class="row align-items-center mt-4">
                          <div class="col">
                            <input type="password" id="inp_password" name="password" class="form-control" placeholder="Password">
                          </div>
                          <div class="col">
                            <input type="password" id="inp_password2" name="password2" class="form-control" placeholder="Confirm Password">
                          </div>
                        </div>
                        <div class="row justify-content-start mt-4">
                          <div class="col">
                            <div class="form-check">
                              <label class="form-check-label">
                                <input type="checkbox" class="form-check-input">
                                I Read and Accept <a href="#">Terms and Conditions</a>
                              </label>
                            </div>
                            <button class="btn mt-4 btn-primary">Submit</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </footer>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body></html>
    

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!