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

hamburger menu

Enthusiast ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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

Q_Dw_15_menu.png

Views

1.1K

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

correct answers 1 Correct answer

LEGEND , May 07, 2019 May 07, 2019

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

Q_Dw_15_menu.png

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

<img class="logo" src="images/logo.png" alt="Roar Bikes logo">

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

...

Votes

Translate

Translate
Community Expert ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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

.site-nav {

        z-index: 99999;

}

Paul-M - Community Expert

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 ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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 ...

Paul-M - Community Expert

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
Enthusiast ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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

Q_Dw_16_menu.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 ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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;

}

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
Enthusiast ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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

Q_Dw_16_menu.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 ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

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>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 ,
May 06, 2019 May 06, 2019

Copy link to clipboard

Copied

Although I would normally recommend using Bootstrap, something that I would do, in this case, where you are spending a lot of time learning while creating, I would suggest not to use Bootstrap. It is the first time that I have checked a website in PageSpeed Insights where the values have been in the 90's. This is partially due to the lean code and partially because you are serving HTTP/2 - an Nginx box?. All in all, well done.

Even so, I have a few remarks, namely

To answer your question regarding the navigation bar, the problems are because of the misuse of position: absolute. This removes the element from the natural document flow.

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
LEGEND ,
May 07, 2019 May 07, 2019

Copy link to clipboard

Copied

LATEST

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

Q_Dw_15_menu.png

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

<img class="logo" src="images/logo.png" alt="Roar Bikes logo">

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;

}

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