• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

New Here ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

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.

 

Welcome_header.jpg

I

Views

3.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

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 & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

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.

 Screen Shot 2019-10-21 at 6.55.40 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

No need to duplicate your post.  To avoid confusion, I have merged this with your original question.

 

So this isn't really a header image at all.  It's a whole page image. In that case move the background image to your body selector.

 

body {
margin: 0;
padding: 0;
background: url(https://placeimg.com/1200/200/nature)no-repeat top center;
text-align: center;
background-size:cover;
}

 

Nancy O'Shea— Product User, Community Expert & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 21, 2019 Oct 21, 2019

Copy link to clipboard

Copied

LATEST

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines