I've got a drop down menu that won't appear over the rest of the content. I've set the position to absolute and the z-index to 99 and no luck. Any ideas how to get it to lay on top of the rest of the site?
<body>
<header>
<div class="container">
<h1 class="logo">Relaxr</h1>
<nav>
</span>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
nav {
position: relative;
}
nav ul {
display: none;
}
header {
margin-left: -20px;
margin-right: -20px;
}
body {
margin-left: 20px;
margin-right: 20px;
}
.container {
width: 100%;
margin: 0;
}
#main {
margin-top: 10px;
}
header nav ul li {
display: block;
margin-right: 20px;
margin: 0 20px 0 0;
}
.hamburger {
margin-top: 5px;
margin-right: 80px;
margin-bottom: 20px;
float:right;
position: relative;
display: inline-block;
width: 1.5em;
height: 0.74em;
border-top: 0.2em solid #fff;
border-bottom: 0.2em solid #fff;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.9em;
left: 0px;
width: 100%;
border-top: 0.2em solid #fff;
}
nav ul {
position: absolute;
left: 0; top: 100%;
width: 100%;
background-color: black;
z-index: 99;
Codepen:
http://codepen.io/kiddigit/pen/wWvPJm
In your #media query change
nav {
position: relative;
}
to
nav {
position: absolute;
}
This will keep your menu on top.
I think You should use something like this to work
$(".hamburger").click(function(e){
$("nav > ul").toggle();
});
there is only one difference I've added a closing bracket in
$("nav > ul").toggle();
Related
I am trying to create a vertical timeline having this codepen as reference but unfortunately it's not working for me.
My code is here in this sandbox
App.js
import styles from "./styles.module.css";
export default function App() {
return (
<div className="App">
<div className={styles.carouselContentWrapper}>
<div className={styles.year}>
<span>2021</span>
</div>
<ul className={styles.textWrapper}>
<li className={styles.text1}>Text1</li>
<li className={styles.text2}>Text2</li>
</ul>
</div>
</div>
);
}
Styles.module.css
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: 1;
}
Any ideas on what is causing this would be much appreciated.
Note: Just to mention that I am using css modules in my original project so would like it to work by using css modules.
You can put text in div so you can position it:
.textWrapper ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: #fff;
}
.textWrapper ul li::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
z-index: -1;
}
.textWrapper ul li div {
position: absolute;
left: 20px;
top: 25px;
color: white;
}
body {
background-color: blueviolet
}
<div class="App">
<div class={styles.carouselContentWrapper}>
<div class={styles.year}>
<span>2021</span>
</div>
<div class=textWrapper>
<ul>
<li class={styles.text}>
<div>Text1</div>
</li>
<li class={styles.text}>
<div>Text2</div>
</li>
</ul>
</div>
</div>
</div>
it works as reference codepan. give background color to your ul or change for li.
Sorry for my English!
My menu is displayed incorrect! The problem: It doesn't located on full container! How fix it?
The code is here:
<header id="header">
<div class="center">
SITE NAME
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
<style>
/*HEADER*/
/*HEADER*/
header{
padding: 20px 0;
/* height: 118px; */
position: fixed;
background: white;
width: 100%;
z-index:300;
}
header .logo{
float: left;
width: 20%;
color: #637f83;
font-size: 2em;
font-weight: bold;
margin: 0;
}
header nav ul {
/* position: absolute;
right: 0;
width: 70%; */
}
header nav{
float: left;
margin-left:50px;
/* width: 50%; */
line-height: 46px;
height: 50px;
}
header nav ul li{
float:left;
padding:0 0 0 1%;
}
header nav ul{
float:right;
}
header nav ul li a{
color:#637f83;
display:block;
float: left;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 17px;
}
</style>
Thank you!
header {
padding: 20px 0;
/* height: 118px; */
position: fixed;
background: white;
width: 100%;
z-index: 300;
}
header .logo {
float: left;
width: 20%;
color: #637f83;
font-size: 2em;
font-weight: bold;
margin: 0;
}
header nav ul {
/* position: absolute;
right: 0;
width: 70%; */
}
header nav {
float: right;
width: 79%;
}
header nav ul li {
float: left;
padding: 0 0 0 1%;
}
header nav ul {
list-style: none
}
header nav ul li a {
color: #637f83;
display: block;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 17px;
}
.clear {
clear: both
}
<header id="header">
<div class="center">
SITE NAME
<nav>
<ul>
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>PROJECT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
jsfiddler https://jsfiddle.net/3fw0ynLy/
I have a Horizontal Menu. When the mouse is hovered over the child elements it disappears. The child elements cannot be clicked. I would like the child elements to stay when the mouse is hovered over it.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
It's because you have positioned your submenu absolutely, and it's too far away from your parent li, so your mouse is leaving the parent menu before it reaches the submenu. I've added borders to show you.
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid blue;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 70px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
You have padding, but it's on your a element, and needs to be on your li element, instead. Either add padding-top to your submenu li elements or adjust their top position so that they're directly underneath (aka "touching") the parent element.
Here is the code with the menu moved to top: 40px and the padding added to the submenu li elements:
.header {
color: #FFFFFF;
height: 60px;
width: 100%;
margin: auto;
}
.header_logo {
width: 40%;
height: 100%;
float: left;
}
#logo {
height: 100%;
top: 0;
left: 0;
width: 50%;
}
.header_title {
width: 60%;
float: left;
}
#titles {
position: absolute;
top: 20px;
font-family: "Times New Roman", Times, serif, Georgia;
font-size: 97%;
color: #B8B8B8;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
color: inherit;
padding: 21px 10px;
}
li ul li {
padding: 21px 10px;
}
li a:hover {
background-color: #666699;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
* {
border: 0;
margin: 0;
padding: 0;
}
.content {
height: 800px;
margin: auto;
background-color: #C0C0C0;
}
.footer {
margin: auto;
background-color: #000000;
}
<div class="header">
<div class="header_logo">
<img id="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle
Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/
I have an HTML code that can be simplified as:
<body>
<div class='header'>
</div>
<div class='main'>
<nav class='menu'>
<a>a</a><a>b</a>
</nav>
<div class='content'>Here be dragons!</div>
</div>
</body>
It uses the following CSS:
html, body
{
margin: 0;
padding: 0;
background-color: #7effad;
}
.header
{
background-color: black;
position: relative;
height: 20px;
}
.main
{
position: relative;
}
.main .menu
{
background-color: white;
}
.main .menu a,
.main .menu a:visited,
.main .menu a:active
{
display: block;
float: left;
background-color: blue;
border-radius: 2px;
margin: 5px;
}
.main .menu:after
{
display: block;
content: "";
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
.main .content
{
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
margin-left: 21px;
margin-right: 21px;
margin-top: 15px;
margin-bottom: 0;
min-height: 1500px;
background-color: #d4b074;
}
As you can see here this generates some sort of a margin between the header and the menu. However, if i remove the content tag all together this margin magically disappears.
I don't understand how it can alter the appearance, since it is a normal block that follows the menu.
Edit: The problem only occurs in Firefox, Chromium does everything just fine.
The problem goes away if i set margin-top for .main .content to 0; however if margin-bottom of .main .menu is non-zero the problem returns.