I'm doing a website project, where I'm using Materialize framework.
Problem :
I have to make a navbar, where it should be able to let out a dropdown menu/submenu. I think the main problem could be either on the overflow: or the z-index. Because of that, I've tried to test the overflow between auto, visible, etc. There are 2 observations that I got during my testing:
Can anyone points out what did I miss? or what is wrong in my code, any help would be appreciated, thank you.
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="HandheldFriendly" content="true">
<title></title>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
</head>
<body>
<!-- Header -->
<nav id="navbar" class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.html" class="brand-logo">
<img src="images/logo_new.png" class="logosize" alt="logo">
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class='dropdown-button' href='#' data-activates='architect'>Architect</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='interior'>Interior</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='commercial'>Commercial</a>
</li>
<li>
<a class='dropdown-button' href='#' data-activates='test'>Office</a>
</li>
<li>
<a href="about.php">About Us</a>
</li>
<li>
<a href="contact.php">Contact Us</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a class="dropdown-button" href="#" data-activates="architect-mobile">Architect</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="interior-mobile">Interior</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="commercial-mobile">Commercial</a>
</li>
<li>
<a class="dropdown-button" href="#" data-activates="test-mobile">Office</a>
</li>
<li>
<a href="about.php">About Us</a>
</li>
<li>
<a href="contact.php">Contact Us</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
<!-- Info Page -->
<div class="container">
<div class="row">
<div class="col s12">
<!-- note: there is center before -->
<!-- <h3><i class="mdi-content-send brown-text"></i></h3> -->
<!-- Menu 1 -->
<div class="col s12 m5">
<p align="left">
<h3>
<b>Intimate House</b>
</h3>
<br> Project : Intimate House
<br>
<br> Location : Pulau Putri, Puri - West Jakarta - Indonesia
<br>
<br> Site Area : 160 sqm
<br>
<br> Building Area : 210 sqm
<br>
<br> Design Phase : 2016
<br>
<br> Construction Period : April 2016 - July 2017
<br>
<br>
</p>
<div class="textbox">
<p align="left">
<i>
Intimate House was built on a 8m x 20m land in West Jakarta. At first, it was a one story house with 2 bedrooms and 2 bathrooms.
It had a high ceiling, but lack of open space inside the house which make this house look
extremely dark, moist, and stuffy.</i>
<br>
<br>
</p>
<p align="right">
<i>
We transformed this house program by separating service area and private area. Furthermore private area is connected by a
connecting chamber in order to transform service area into private area which can be used
as a gathering room which is the main area in this Intimate House.</i>
<br>
<br>
</p>
<p align="left">
<i>
Living Room was designed to have natural air circulation and natural lighting. Both these natural element is obtained from
an open space next to Living Room, High Ceiling, and Skylight.</i>
<br>
<br>
</p>
</div>
</div>
<!-- Menu 2 -->
<div class="col s12 m7">
<div class="slider">
<ul class="slides">
<li>
<img src="images/architecture/intimate_house/1.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/3.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/4.jpg">
<!-- random image -->
</li>
<li>
<img src="images/architecture/intimate_house/5.jpg">
<!-- random image -->
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<!-- Dropdown Menu -->
<div class="container_sub">
<div class="section">
<div class="row">
<!-- Architect -->
<ul id='architect' class='dropdown-content'>
<li>
<a href="project.html">Project one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='architect-mobile' class='dropdown-content'>
<li>
<a href="project.html">Project one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Interior -->
<ul id='interior' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='interior-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Commercial -->
<ul id='commercial' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='commercial-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<!-- Office -->
<ul id='test' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
<ul id='test-mobile' class='dropdown-content'>
<li>
<a href="#!">one</a>
</li>
<li>
<a href="#!">two</a>
</li>
<li>
<a href="#!">three</a>
</li>
</ul>
</div>
</div>
</div>
<footer class="page-footer teal">
<div class="footer-copyright">
<div class="container">
Copyright @
<a class="white-text" href="#">2018</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel.carousel-slider').carousel({
fullWidth: true
});
$('.slider').slider();
$(".dropdown-button").dropdown({
hover: true
});
});
</script>
Here is my full code: https://codepen.io/bukuchaga/pen/Zjqvxe
Thanks again.
You are doing it wrong, you should know how the position properties work. You are using position relative. so when you use position relative it means relative to itself not from something else. Next time keep in mind how these tricky things works so that it won't waste your time in resolving the error caused by them.
I have seen your code, the css wrapper class nav .nav-wrapper has a wrong relative position.
You don't need to use relative position here because, It is unnecessary. So, remove it and your code will work like a charm.
If you have any other error in design, post another question and if i or someone else has answered your question marked my or someone answer as accepted so that this thread can be closed. Thanks.