Dropdown Menus and Background Images

Report · Aug 22, 2020

I am trying to show a client how her website will look with a certain background as well as multi level dropdown menus. Many of you were very helpful and I thank you.

Here are my challenges:

1. I'm using the code for a backfround image however the image will not show. Is that because I'm using my local computer and nothing has been upgraded to the host?

2. I want to have 2 level of dropdown menus and it's not working. I want "vacations" to move over to the right and be "under" memories with an arrow the same way as "photobooks". Here is my code & a screenshot.

<nav class="navbar navbar-expand-lg"> <a class="navbar-brand" href="IMAGES/Picture This Photo Books Logo website 33%.gif"><img src="IMAGES/Picture This Photo Books Logo website 33%.gif" class="rounded-circle img-fluid" alt="Picture This Photo Books logo"></a><br />
<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" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="home.html" a style="color: #653819">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="aboutus.html" a style="color: #653819">About Us</a> </li>
<li class="nav-item"> <a class="nav-link" href="testimonials.html" a style="color: #653819">Testimonials</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="photobooks.html" a style="color: #653819" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Photo Books </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="memories.html" a style="color: #653819" background-color: transaprent>Memories</a> <a class="dropdown-item" href="vacations.html" a style="color: #800000">Vacations</a>
<a class="dropdown-item" href="christenings.html" a style="color: #653819">Christenings</a> </div>
</li>
<li class="nav-item"> <a class="nav-link" href="contact us" a style="color: #800000">Contact Us</a> </li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" a style="color: #653819" type="submit">Search</button>
</form>
</div>
</nav>

Thank you.

CJ

Report · Aug 22, 2020

Please upload your work to a TEST folder on your remote server and post the URL here.

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

Report · Aug 22, 2020

I am unable to upload to a server as the site is not completed.

Report · Aug 22, 2020

Have you looked perhaps at a codepen example of a Bootstrap 4 multi level menu:

https://codepen.io/marktempelaere/pen/OOjeOj

https://codepen.io/surjithctly/pen/RBQWya

https://codepen.io/jreaux62/pen/MRXqLb

Report · Aug 22, 2020

We understand it's not completed. That's why I said upload to a TEST folder. Or get some temporary web hosting for testing and debugging purposes. When your question is answered, you can delete the files from your server.

Code fragments don't tell us what we need to know. And in a user-to-user forum like this one, asking us to make guesses about what's contained in the rest of your code is counter-productive for everyone.

[Moderator merged your previous background-image question with this one.]

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

Report · Aug 18, 2020

I googled how to use an image as a background for a web page in Bootstrap and it's not working. They are jpg images (see attached) and I want to be able to show the client how they look. They are images on my computer and there is no url.

Thank you for your support.

Carolyn

Report · Aug 18, 2020

BASIC CSS

body {

background: url (folder/your_image.jpg) center center fixed no-repeat;

background-size: cover;

}

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

Report · Aug 19, 2020

Working example.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Latest Bootstrap 4.5.0</title>

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<style>
body {
background: url(https://placeimg.com/900/900/arch) center center fixed no-repeat;
background-size: cover;
}
</style>

</head>
<body>
<div class="container">
<div class="row">
<div class="col">
Here is some content
</div>
</div>
</div>


<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

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