cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0
Upvote

drop down menu doesnt toggle when absolute position is applied

linnspitz
New Here ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

Hi everyone!

I'm working on an online portfolio and for tablet and mobile view, I created a drop down hamburger menu. For the tablet view, I had to apply an absolute positioning class, so it wouldn't disrupt the text below. I applied the class to the div tag around the three links in the menu. Now the toggle function doesn't work anymore. It still works fine for mobile, where I didn't have to apply the absolute position, which means that the problem must lie in the class I applied. This confuses me though, because when I had the issue with the menu pushing down the main part, I took to google and overwhelmingly the answer was to use absolute position.

Does anyone know what might have gone wrong?

Views

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

osgood_
LEGEND , Dec 06, 2017 Dec 06, 2017

If youre looking for a no frills simple mobile navigation:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Simple Mobile Navigation</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

jQuery(document).ready(function() {

$('.mobile-view').click(function() {

$('.desktop-view').slideToggle();

});

});

</script>

<st

...

Votes

Translate

Translate
replies 5 Replies 5
latest latest Jump to latest reply
Jon Fritz Community Expert
Community Expert ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

linnspitz  wrote

...Does anyone know what might have gone wrong?


Not without seeing your code.

Could you post a link to your work in progress so we can see what's happening in our browsers?

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
osgood_
LEGEND ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

linnspitz  wrote

Hi everyone!

I'm working on an online portfolio and for tablet and mobile view, I created a drop down hamburger menu. For the tablet view, I had to apply an absolute positioning class, so it wouldn't disrupt the text below. I applied the class to the div tag around the three links in the menu. Now the toggle function doesn't work anymore. It still works fine for mobile, where I didn't have to apply the absolute position, which means that the problem must lie in the class I applied. This confuses me though, because when I had the issue with the menu pushing down the main part, I took to google and overwhelmingly the answer was to use absolute position.

Does anyone know what might have gone wrong?

Try adding a z-index to the absolutely positioned container css.....

z-index: 1000;

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
linnspitz
New Here ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

Thanks for the answers! Here's my code, sorry I didn't post it before.

Screenshot (32).pngScreenshot (29).pngScreenshot (33).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
Nancy OShea Community Expert
Community Expert ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

In Response To linnspitz

BOOTSTRAP RESPONSIVE NAVBAR

CODE:

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block {float:none}

</style>

</head>

<body>

<!--begin top nav bar-->

<nav class="navbar navbar-inverse" role="navigation">

<div class="container-fluid">

<div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="#">MENU 1</a></li>

<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu">

<li><a href="#">submenu 1-1</a></li>

<li><a href="#">submenu 1-2</a></li>

<li><a href="#">submenu 1-3</a></li>

</ul>

</li>

<li><a href="#">MENU 3</a></li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a> </li>

<li><a href="#">MENU 6</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<div class="container">

<div class="row">

<div class="col-md-10 center-block">

PAGE CONTENT GOES HERE...

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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
osgood_
LEGEND ,
Dec 06, 2017 Dec 06, 2017

Copy link to clipboard

Copied

LATEST
In Response To linnspitz

If youre looking for a no frills simple mobile navigation:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Simple Mobile Navigation</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

jQuery(document).ready(function() {

$('.mobile-view').click(function() {

$('.desktop-view').slideToggle();

});

});

</script>

<style>

header {

background-color: #609;

text-align: right;

}

.mobile-view {

display: none;

border-bottom: 1px solid #fff;

}

.mobile-view a {

display: block;

padding: 10px 25px;

text-decoration: none;

color: #fff;

}

@media screen and (max-width: 768px) {

.mobile-view {

display: block;

}

}

@media screen and (max-width: 768px) {

.desktop-view {

display: none;

}

}

.desktop-view ul  {

margin: 0;

padding: 0;

overflow: hidden;

float: right;

}

@media screen and (max-width: 768px) {

.desktop-view ul  {

width: 100%;

}

}

.desktop-view ul li {

display: inline-block;

list-style: none;

text-align: right;

}

@media screen and (max-width: 768px) {

.desktop-view ul li  {

float: none;

width: 100%;

text-align: left;

border-bottom: 1px solid #fff;

}

}

.desktop-view ul li a {

display: block;

padding: 10px 25px;

text-decoration: none;

color: #fff;

}

.desktop-view ul li a:hover {

background-color:#909;

}

</style>

</head>

<body>

<header>

<div class="mobile-view"><a href="#">Mobile Menu</a></div>

<nav class="desktop-view">

<ul>

<li><a href="#">Portfolio</a></li>

<li><a href="#">About Me</a></li>

<li><a href="#">Contact</a></li>

</ul>

<br style="clear: both;">

</nav>

</header>

</body>

</html>

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
Copyright © 2024 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices