Highlighted

Dropdown Menus and Background Images

New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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

TOPICS
Bootstrap, Code, How to

Views

65

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

Dropdown Menus and Background Images

New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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

TOPICS
Bootstrap, Code, How to

Views

66

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
Aug 22, 2020 0
Adobe Community Professional ,
Aug 22, 2020

Copy link to clipboard

Copied

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

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 22, 2020 0
New Here ,
Aug 22, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Aug 22, 2020 0
LEGEND ,
Aug 22, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Aug 22, 2020 1
Adobe Community Professional ,
Aug 22, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 22, 2020 0
New Here ,
Aug 18, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
Aug 18, 2020 0
Adobe Community Professional ,
Aug 18, 2020

Copy link to clipboard

Copied

BASIC CSS

 

body {

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

background-size: cover;

}

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 18, 2020 0
Adobe Community Professional ,
Aug 19, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

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
Reply
Loading...
Aug 19, 2020 0