Navbar as a nav.shtml include and inserting fluid containers underneath where they will stay.

Contributor ,
Jan 12, 2021 Jan 12, 2021

Copy link to clipboard

Copied

The nav.shtml is in my index file as an include. <!--#include file="nav.shtml"--> It works fine.

When I try to insert a fluid container UNDERNEATH the include and put an image in the container, part of the image is underneath the navbar.

I know this has something to do with a tag of some sort.  I have tried <header></header> and wrapped it around the include.  It does not work.

Any help would be appreciated.

 

CODE BELOW
INDEX.SHTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Center for Family Development. Treatment for those suffering with Reactive Attachment Disorder. Training for those wanting to work as Certified Attachment Therapists.</title>
<meta name="description" content="The Center for Family Development offers evaluations and treatment including attachment focused treatment, Dyadic Developmental Psychotherapy, DDP, family therapy, and other evidence-based treatments for children and adults who have experienced early trauma.">
<!-- Bootstrap -->
<link href="css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="css/MAIN.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--#include file="nav.shtml"-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.4.1.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>
<script src="js/hover.js"></script>
</body>
</html>
=============================================================

NAV.SHTML
NAVBAR CODE

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a href="index.shtml" title="The Center for Family Development" class="navbar-brand navbar-brand-font"> </a><img src="images/logonavbara.png" class="img-fluid logo-center" alt="Logo">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

<div class="collapse navbar-collapse navbar-font" href="id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.shtml">Home <span class="sr-only">(current)</span></a> </li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="staff.shtml">Staff</a>
<a class="dropdown-item" href="offices.shtml">Offices</a>
<a class="dropdown-item" href="testimonials.shtml">Testimonials</a> </div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Treament </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="treatmentoptions.shtml">Treatment Options</a>
<a class="dropdown-item" href="dyadicdevelopmentalpsychotherapy.shtml">DDP</a>
<a class="dropdown-item" href="treatmentresearch.shtml">Research</a>
<a class="dropdown-item" href="treatmentarticles.shtml">Publications.Papers.Presentations</a>
<a class="dropdown-item" href="treatmentarticles.shtml">Articles</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Training </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="trainingoptions.shtml">Training Options</a>
<a class="dropdown-item" href=""masterclasses.shtml>Master Classes</a>
<a class="dropdown-item" href="certifications.shtml">Certifications</a></div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Resources</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Certified DDP Therapists</a>
<a class="dropdown-item" href="#">Articles</a>
<a class="dropdown-item" href="#">Parenting</a>
<a class="dropdown-item" href="#">Something else here</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="booksanddvds.shtml">Books and DVDs<span class="sr-only"></span></a></li>
<li class="nav-item"> <a class="nav-link" href="contact.shtml">Contact<span class="sr-only">(current)</span></a></li>
<li class="nav-item">
</ul>
<div class="social">
<a href="https://www.facebook.com/Center-For-Family-Development-181177051901298/"alt="Facebook Icon"><img src="images/facebooksmall.png" class="img-fluid" alt="Facebook Account"></a></div>
</div>
</nav>

Views

57

Likes

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
Contributor ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

Never mind. I'm just going to use padding.

Likes

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
Adobe Community Professional ,
Jan 13, 2021 Jan 13, 2021

Copy link to clipboard

Copied

LATEST

You're using a Fixed navbar.  As such, you should add some CSS padding to your <body> selector.

 

CUSTOM CSS

body {

padding-top: 55px;

}

 

OR INLINE CSS

<body style="padding-top:55px">

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

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