Inspiring

Answered

hamburger menu

8 replies
1637 views
Translate

Hi,

When the hamburger menu is clicked, the dropdown menu appears behind the photo.

How can I present it like the third picture?

Link

Roar Cycles 4

Hosun Kang

This topic is closed to new replies. Start a new post to keep the conversation going.

O

osgood_Correct answer

Legend

Hosun wrote
Hi,
When the hamburger menu is clicked, the dropdown menu appears behind the photo.
How can I present it like the third picture?
Link
Roar Cycles 4
Hosun Kang

Remove class="logo" from the image src tag, its never needed.

For the mobile nav positioning you have to do a bit of re-organising at @media screen and (max-width: 500px) { }

Add to the 500px media query:

header {

flex-direction: column;

padding: 0;

}

.logo {

width: 100%;

padding: 10px 30px;

}

Also change your .site-nav css to as below for the 500px media query;

.site-nav {

width: 100%;

position: static;

display: none;

background-color: black;

padding: 0px 0px 0px 0px;/*alignment*/

}

position: static; re-connects the element to the natural flow of the html and pushes what is below it, the image, down when the hamburger menu is clicked. position: absolute; removes the element from the natural html flow therefore it is un-connected to the other elements around it, which is suitable for your dtp view.

Add margin-top: 30px; to your .hamburger-icon css for the 500px media query:

.hamburger-icon {

padding: 0.65em 0.35em;

position: absolute;

right: 1em;

cursor: pointer;

margin-top: 30px;

}

O

osgood_Correct answer

Legend

Hosun wrote
Hi,
When the hamburger menu is clicked, the dropdown menu appears behind the photo.
How can I present it like the third picture?
Link
Roar Cycles 4
Hosun Kang

Remove class="logo" from the image src tag, its never needed.

For the mobile nav positioning you have to do a bit of re-organising at @media screen and (max-width: 500px) { }

Add to the 500px media query:

header {

flex-direction: column;

padding: 0;

}

.logo {

width: 100%;

padding: 10px 30px;

}

Also change your .site-nav css to as below for the 500px media query;

.site-nav {

width: 100%;

position: static;

display: none;

background-color: black;

padding: 0px 0px 0px 0px;/*alignment*/

}

position: static; re-connects the element to the natural flow of the html and pushes what is below it, the image, down when the hamburger menu is clicked. position: absolute; removes the element from the natural html flow therefore it is un-connected to the other elements around it, which is suitable for your dtp view.

Add margin-top: 30px; to your .hamburger-icon css for the 500px media query:

.hamburger-icon {

padding: 0.65em 0.35em;

position: absolute;

right: 1em;

cursor: pointer;

margin-top: 30px;

}

Translate

Nancy OShea

Community Expert

Z-index won't work on anythinig that is not positioned.

.site-nav {

width: 100%;

right: 0;

position: absolute;

top: 5.5em;

display: none;

background-color: black;

padding: -4px 0px 0px 0px;

z-index: 100;

}

Translate

Nancy O'Shea— Product User & Community Expert

HosunAuthor

Inspiring

Hi,

Thank you very much for your reply.

Your solution and Paul-M's solution are on the line and give the same result.

The remaining issue is the photo is partly hidden by the dropdown menu.

With the hamburger menu is clicked, I want to place the photo just below the dropdown menu.

I just guess something should be done with jQuery.

Hosun Kang

Translate

Nancy OShea

Community Expert

Maybe Bootstrap would work better than what you have now.

Copy & paste this code into a new, blank document and test it in various devices.

<!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>Bootstrap 4.3 Starter</title>
<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>
.navbar { /**font size grows 1px for every 100px of viewport width**/
font-size: calc(26px + 1.5vw); }
.bg-warning { background-color: orange !important; }
</style>
</head>
<body>
<nav id="topNav" class="navbar navbar-top navbar-expand-lg navbar-light bg-warning"> <a class="navbar-brand mx-auto" href="https://example.com"> 
<!--Your logo goes here--> 
<img class="shadow-sm rounded-circle" src="https://dummyimage.com/250x110" alt="logo/brand"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Services</a> </li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-4">Bootstrap with Dreamweaver</h1>
<p class="lead">Easily build your page using the Bootstrap components from the Insert panel.</p>
<hr class="my-4">
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p class="lead"> <a class="btn btn-dark btn-lg" href="#" role="button">Learn more</a> </p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-3">
<h3>Text is good for search engines & humans</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder"> 
</div>
<div class="col-sm-6 col-lg-3">
<h3>Text is good for search engines & humans</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder"> 
</div>
<div class="col-sm-6 col-lg-3">
<h3>Text is good for search engines & humans</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder"> 
</div>
<div class="col-sm-6 col-lg-3">
<h3>Text is good for search engines & humans</h3>
<img class="img-fluid" src="https://dummyimage.com/900x600" alt="placeholder"> 
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here</footer>
</div>
</div>
<!--first jQuery then popper then Bootstrap js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Translate

Nancy O'Shea— Product User & Community Expert

P

Paul-M

Legend

in your file styles.css

/*Mobile View*/
@media screen and (max-width: 500px) {
    h1 {
        font-size: 25px;
    }

    .site-nav {
        width: 100%;
        right: 0;

change to

/*Mobile View*/
@media screen and (max-width: 500px) {
    h1 {
        font-size: 25px;
    }

    .site-nav {
        width: 100%;
        right: 0;
        z-index: 99999;

So the menu will appear on top of the image ... Is that what you wanted? z-index controls the stacking order of positioned elements ...

Translate

Paul-M - Community Expert

HosunAuthor

Inspiring

Hi,

Thank you very much for your reply.

The remaining issue is the photo is partly hidden by the dropdown menu.

With the hamburger menu is clicked, I want to place the photo just below the dropdown menu.

I just guess something should be done with jQuery.

Hosun Kang

Translate

P

Paul-M

Legend

Inside you media query for smaller screens add something like this:

.site-nav {
z-index: 99999;
}

Translate

Paul-M - Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.