This is my first ever post to Stack Overflow and I'm not familiar with forum regulations with posting. So please let me know anything that I have done wrong. I have researched this issue in the forums and nothing I've come across gives me a clear answer.
I am trying to create a dropdown menu from the "News" element, but I never get any visible result when running the code. I tried to change the .dropdown-content's display value to block to see if it would make the list visible, but nothing showed. What am I missing?
body{
background-image: url("images/seamless-panda-bear-pattern.jpg");
font-size: 100%;
width: 80%;
margin: auto;
font-family: Palatino,"Palatino", Arial;
}
#top{
background-color: black;
color: white;
padding-left: 10px;
border: 2px solid white;
font-family: Copperplate,"Copperplate Gothic Light",fantasy;
opacity: 0.85;
padding-left: 25px;
}
#menu{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
width: 80%;
}
li{
float: left;
}
#login{
float: right;
padding-right: 20px;
}
li a{
display: block;
color: white;
text-decoration: none;
text-align: center;
padding: 14px 16px;
}
li a:hover{
background-color: white;
color: black;
}
li.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
padding: 12px 16px;
z-index: 1;
}
.dropdown-content a{
display: block;
text-decoration: none;
padding: 12px 16px;
color: black;
}
.dropdown:hover .dropdown-content{
display: block;
}
#bio{
}
#bottom{
}
<div id="nav">
<ul style="list-style-type: none" id="menu">
<li>Home</li>
<li class="dropdown"><a class="dropbtn" href="#">News</a>
<div class="dropdown-content">
Games
Web Design
Travel
</div>
</li>
<!-- create a link to a part of the same page for contact info -->
<li>Contact info</li>
<li id="login">Log In</li>
</ul>
</div>
To solve your position fixed issue. You can add position: fixed; to #nav and change the width on #menu from width: 80%; to width: 100%;
Here's a JS Fiddle.
Hope that helped!
Related
I am trying to make a dropdown menu, it's my first time doing it and I'm experimenting with it. The problem that I'm facing is this:
As you can see, the principal menus are showing in a list. I have tried displaying them as flex and other attempts, but it seems like the header is making a limitation to them and I don't know how to put them beside each other. (Clarification: 'Notificaciones' and 'Usuario' are main menus and 'Mi Perfil' is a submenu that comes from 'Usuario' (parent))
Here is my code:
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
Thank you so much in beforehand!
First the <li> should have display: inline-block for being arranged in a row. It has nothing to do with the header.
Second, the position of the sub menu (ul ul) needs to be absolute within a li with position: relative.
white-space: nowrap will make the element not wrap when the width is larger than the parent element's width.
* {
text-decoration: none;
list-style: none;
}
body {
margin: 0px;
padding: 0px;
font-family: roboto;
}
.header-text {
position: relative;
margin: 2px 6px 2px 4px;
cursor: pointer;
}
.header-icons {
width: 32px;
margin: 2px 0px 2px 0px;
cursor: pointer;
}
header {
display: flex;
justify-content: space-between;
background-color: rgb(20, 33, 61);
color: white;
height: 30px;
align-items: center;
padding: 6px;
position: static;
}
.nav li a {
padding: 4px;
background-color: red;
list-style: none;
display: inline-block;
float: right;
}
/* added css */
ul li{
display: inline-block;
position: relative;
white-space: nowrap
}
ul ul{
position: absolute;
right:0;
top:100%
}
<header>
<div class="header-text">
<h1 class="titulo-logo">Lorem</h1>
</div>
<nav class="nav">
<ul>
<li>Notificaciones</li>
<li>
Usuario
<ul>
<li>Mi Perfil</li>
</ul>
</li>
</ul>
</nav>
</header>
I'm trying to make a Navbar with a dropdown menu. I want 'Clips' to have a dropdown menu with 3 links. But I can't seem to get it to work.
If i set the position to absolute i get them stacked on top of eachother en when i change it to relative they go inside the link. Can someone help? Do I have to change the selectors?
Thanks in advance!
.navbar{
display: flex;
justify-content: space-around;
align-items: center;
font-size: 18px;
background-color: darkred;
}
.nav-list{
list-style-type: none;
}
.dropdown{
position: relative;
display: inline-block;
list-style-type: none;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.dropdown ul li{
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: darkred;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
overflow: visible;
}
.dropdown-content a {
color: black;
padding: 12px 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.nav-list .list-item {
display: inline-block;
padding: 10px 10px;
border: solid black 1px;
border-radius: 10px;
margin: 2px;
}
.navbar a{
text-decoration: none;
color: white;
font-family: 'arvo', italic;
}
.logo{
height: 60px;
position: relative;
margin: 5px 0px 5px 17px;
}
.logo_text {
position: absolute;
top: 50px;
font-size: 12pt;
color: white;
}
<body>
<header>
<nav class="navbar">
<div>
<img class="logo" src="img/FrankLogo.svg"> <h3 class="logo_text"><a href=index.html>FRANKIE</a></h3>
</div>
<ul class="nav-list">
<li class="dropdown">Clips
<ul>
<li class="dropdown-content">Frankie Anthem</li>
<li class="dropdown-content">Vrouwtjes</li>
</ul></li>
<li class="list-item">Shows</li>
<li class="list-item">Vieze Victor</li>
<li class="list-item">Contact</li>
</ul>
</nav>
</header>
Set UL position inside top menu
li.dropdown > ul {
position: absolute;
margin-left: 0 !important;
padding-left: 0;
top: 40px;
}
I am building a menu. I have this code:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
And CSS:
nav{
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
padding: 20px 35px 0 0px;
}
nav ul{
margin-right: 100px;
height: 90px;
list-style-type: none;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover{
text-align: center;
color: 33adae;
What I am trying to do is to make the links clickable like blocks with the height of the whole navbar. The way I have done It so far, you can click only the text in the links.
Generally all that is needed is.
nav a{
display:block;
}
However for a fuller example it's generally easier to let the links determine the height of the header.
For centering, don't use floats, set the ul to text-align:center and the li to display:inline-block.
* {
margin: 0;
padding: 0;
;
box-sizing: border-box;
}
nav {
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
overflow: hidden;
/* clearfix */
}
nav li {
display: inline-block;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav a {
display: block;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
height: 90px;
line-height: 90px;
padding: 0 25px;
}
nav a:hover {
text-align: center;
color: 33adae;
background: plum;
<nav>
<ul>
<li>Kontakt
</li>
<li>Reference
</li>
<li>Moje služby
</li>
<li>Kdo jsem
</li>
</ul>
</nav>
You could remove the padding from your lis and add it to your a tags. See example http://codepen.io/anon/pen/gaGxpb
Move your <li> padding to the <a> children, and give the links a height:
See codepen
NB: Added a border to the links so as you see the boundaries.
display the links as blocks display: block; and use the line-height to give them the height you want. Try this:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li {
float: right;
padding: 0px 35px 0 0px;
}
nav ul {
margin: 0 100px 0 0;
height: 90px;
list-style-type: none;
}
nav a {
display: block;
line-height: 90px;
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
}
nav a:hover {
text-align: center;
color: 33adae;
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
Here is my version using height and with properties instead of padding, i used background colors so you can see how is working: http://codepen.io/aluknot/pen/wKrqaG
HTML:
<nav>
<ul>
<li>Kontakt</li>
<li>Reference</li>
<li>Moje služby</li>
<li>Kdo jsem</li>
</ul>
</nav>
CSS:
nav {
width: 100%;
height: 90px;
border-top: 3px solid red;
border-bottom: 1px solid gray;
background-color: white;
}
nav li{
float: right;
background: red;
text-align: center;
height: 100%;
width: 120px;
line-height: 90px
}
nav ul{
margin: 0;
padding-right: 100px;
height: 90px;
list-style-type: none;
background: green;
}
nav a{
text-decoration: none;
color: black;
font-size: 17px;
font-family: Montserrat;
font-weight: 700;
display: block;
width: 100%;
height: 100%;
background: blue;
}
nav a:hover {
background: black;
color: white;
}
Could not really find a good title for this question...
Problem: When resizing the browser window, the menu position is not updated in Chrome, UNTIL you hover with the mouse over. In Firefox there is no problem at all.
I've made a simple fiddle http://jsfiddle.net/fHcw7/
If replacing 'position fixed' to 'position relative' there is no problem in Chrome
Html
<div id="main">
<div id="div_top" class="menu">
<nav>
<ul>
<li>
HELLO
</li>
<li>
WORLD
</li>
<li>
BANANA
</li>
</ul>
</nav>
</div>
</div>
CSS
#main
{
height: 175%;
width: 100%;
border: solid red 1px;
position: absolute; top: 0; left: 0;
overflow: hidden;
background-color: #333;
}
#div_top
{
width: 100%;
height: 100px;
margin-top: 20px;
position: fixed;
border: solid yellow 1px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #fff;
z-index: 100;
}
.menu a:link
{
color: #fff;
text-decoration: none;
}
.menu a:visited
{
color: #fff;
text-decoration: none;
}
.menu a:hover
{
background-color: rgba(100, 50, 0, 0.4);
border-radius: 5px;
border: solid white 2px;
margin: -2px;
}
.menu a:active
{
color: #fdd;
}
.menu ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.menu li
{
display: inline;
margin: 20px;
}
I think the problem is related to the display inline of li elements.
Try to replace them with inline-block instead.
I have made a test with your fiddle and it works.
http://jsfiddle.net/notme/FA8TN/
.menu li
{
display: inline-block;
margin: 20px;
}
I have a z-index issue on top-navigation with a menu and its sub-menu, i want menu to overlap sub-menu, i have set z-index of menu higher than sub-menu, but it is not working sub-menu is overlapping menu as default.
Please see and suggest any possible way to do it.
jsFiddle
HTML
<div id="login">
<ul>
<li id="overlap">Log In | Join
<ul class="tsm">
<li>Log In</li>
<li>Join</li>
</ul>
</li>
</ul>
</div>
CSS
#login {
margin: 0px auto;
width: 1000px;
height: 38px;
background: #343438;
}
#login ul {
float: right;
margin: 0px;
padding: 0px;
width: auto;
height: 38px;
}
#login ul li {
float: left;
width: auto;
height: 34px;
display: inline;
list-style-type: none;
}
#login ul a {
color: #FFF;
display: block;
width: auto;
height: 34px;
font: bold 16px/34px "Arial Narrow", Arial, sans-serif;
text-decoration: none;
text-align: center;
padding: 0px 15px;
text-shadow: 0px -1px #000;
}
#login .tsm {
padding: 20px;
background-color: #F2F2F4;
width: 230px;
height: auto;
text-align: left;
border: 4px solid #777;
position: absolute;
visibility: hidden;
top: 32px;
right: 0px;
z-index: 100;
}
#login .tsm li a {
width: 230px;
height: 30px;
margin-bottom: 1px;
text-align: left;
padding: 0px;
text-decoration: none;
color: #000;
text-shadow: 0px 1px #fff;
font: 15px/30px Arial, sans-serif;
border-bottom: 1px solid #DDDDDF;
}
#login ul #overlap {
position: relative;
border: 2px solid #900;
z-index: 1000;
}
#login ul li:hover .tsm {
visibility: visible;
}
#login ul ul li {
border: none;
}
The problem stems from the fact that you're trying to position the parent above its child, which causes problems - if the parent moves up a level, so do its children. Instead of z-indexing the parent list, you need to z-index the login link (a tag):
http://jsfiddle.net/SaNJA/
The code is rough, but it should get you started.
Make sure you add a background colour to the link, otherwise you'll still be able to see through it.