I seem to be having trouble getting my navigation bar to span the width of the page and to locate itself underneath the header I've added. Could someone please help me?
<body>
<div id= "header">
FOOD
</div>
<div id= "navbar">
<ul>
<li>Home </li>
<li>Favs </li>
<li>Cusine
<ul>
<li>Asian </li>
<li>Europe </li>
</ul>
</li>
<li>Recipes </li>
<li>FAQ </li>
<li>Contact Us </li>
</ul>
</div>
</body>
This is the css I've used. I kept adding widths but it just seems to have different widths.
#navbar
{
clear: both;
float: left;
margin: 0px;
padding: 0px;
width: 100%;
font-family: sans-serif;
z-index: 1000;
position: relative;
top: 100px;
}
#navbar ul
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
position: relative;
right: 50%;
}
#navbar ul li
{
float: left;
position: relative;
left: 50%;
}
#navbar ul li a
{
display: block;
margin: 0px;
text-decoration: none;
background-color: #735D41;
color: white;
font-weight: bold;
text-align: center;
border: 1px solid;
width: 100%;
}
#navbar ul li ul li a
{
background-color: #735D41;
color: white;
}
#navbar ul ul
{
display: none;
position: relative;
left: 0px;
right: auto;
}
#navbar ul ul li
{
left: auto;
margin: 0px;
clear: left;
width: 100%;
}
A good option would be to remove most of your floats and relative positioning and instead use display:table on the ul and display:table-cell on the lis. This will enable you to stretch the nav across the screen. Try it with this:
#navbar ul {
list-style: none;
padding: 0px;
margin: 0px;
width:100%;
display:table;
}
#navbar ul li {
display:table-cell;
}
See an Example here
In this example I used your code but changed and removed a few things. It should be sufficient enough to give you a good idea of what to do.
Related
I'm trying to create a drop-down menu but my text-align command wouldn't seem to work (same applies with font-size and other text-related codes). I tried putting my text-align codes in nav ul li and nothing seem to happen. I've also tried putting it on the main .drop-down menu on CSS but it still has no changes. Can anyone help me out here? I couldn't figure out the reasoning behind this.
My HTML and CSS codes are:
nav{
flex:1;
text-align: right;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 60px;
position: relative;
}
nav ul li a{
text-decoration: none;
color: #fff;
font-size: 13px;
transition: all 0.5s;
}
nav ul li a:hover{
color: #E6C7F3;
}
.dropdown-menu{
display: none;
}
nav ul li:hover .dropdown-menu {
display: block;
position: absolute;
left: -35;
top: 100%;
width: 100px;
background-color:black;
opacity: .8;
border-radius: 10px;
}
.dropdown-menu ul{
display: block;
padding-top: 10px;
}
.dropdown-menu ul li{
width: 0px;
left: -58;
bottom: 5;
padding: 10px;
padding-right: 40px;
text-align: center;
}
<div class="navbar">
<img src="image/durra.png" class="logo">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>SHOP
<div class="dropdown-menu">
<ul>
<li>Bestsellers</li>
<li>Accessories</li>
<li>Jewelry</li>
<li>Miscellaneous</li>
</ul>
</div>
</li>
<li>FEEDBACK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
text-align works with a element having width. But you have used width: 0px . So it's pretty obvious you cannot use alignment there.
Hi First you have to add padding to ul under dropdown-menu. and then set width of li item to 100%. Please refer below code.
.dropdown-menu ul {
display: block;
padding-top: 10px;
padding: 10px 0 0;
}
.dropdown-menu ul li {
width: 100%;
left: -58;
bottom: 5;
padding: 10px 0;
/* padding-right: 40px; */
text-align: center;
}
Probably one noob question, but I can't understand positioning in css very good. Yesterday I had a problem with background and drop-down menu, so I decided to start again from scratch. The problem persists.
My h1 couldn't be in position I wanted so I made its position:relative and then I could move it, but because of that I can't click on my drop-down menu or even on logo. Just half of it.
HTML:
<link rel="stylesheet" type="text/css" href="./style2.css" />
</head>
<body>
<div id="stajl">
<ul>
<li>Home Page </li><li>
Services <span class="arrow">▼</span>
<ul><li>
Trades </li><li>
Exchanges </li><li>
Business to Business </li>
</ul>
<li>About </li><li>
Contact </li>
</ul>
</div>
<div id="img">
<img src="pfslogo2.png" />
</div>
<div id="header">
<h1>We're here to help! </h1>
</div>
</body>
</html>
CSS:
body {
overflow-y: scroll;}
#stajl ul {
list-style-type: none;
margin:0;
padding:0;
float: right;
}
#stajl ul li:hover a{
background-color: #d7e6fa;
}
#stajl ul li {
display: inline-block;
}
#stajl ul li a {
text-decoration: none;
display: block;
padding: 15px;
color: white;
background-color: #0099cc;
}
#stajl ul ul {
display: none;
position: absolute;
margin-left: -105px;
}
#stajl ul li:hover ul {
display: block;
}
#stajl ul ul li {
display: block;
color: white;
width: 352px;
}
#stajl ul li li a:hover {
color: cyan;
}
.arrow {
font-size: 10px;
vertical-align: middle;
}
#img img {
margin: 0;
padding: 0;
height: 50px;
width: 100px;
top: 0;
left:0;
}
#header h1 {
padding: 0;
margin:0;
text-align: center;
position: relative;
top: -40px;
left: -60px;
color: #0099cc;
}
Codepen created by Dorvalla for my problem: codepen.io/anon/pen/VeXyRY
Any advice will be appreciated! Thanks
The H1 is Blocking the Cursor, you need to set the H1 to be a bit shorter:
#header {
text-align:center;
}
#header h1 {
display:inline-block;
}
http://codepen.io/niorad/pen/EPEQxJ
Set the z-index of your menu higher than that of the div.
Put a z-index: -1; on your h1, then your navigation will work again.
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
I made a wordpress template with a simple CSS drop down menu. The code I used is a code that I used regularly, but this time when you hover on the button and than wants to hover on the drop down menu that appears, the drop down menu will disappear.
Does somebody know how I can solve this problem and what's wrong?
Link to template: http://bit.ly/1Ivcg2U
#navigation ul {
list-style: none;
width: 800px;
height: 40px;
padding: 0;
margin: 0 auto;
}
#navigation li {
float: left;
position: relative;
z-index: 500;
display: block;
text-align: center;
margin: 0px 40px;
padding: 5px;
}
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;
left: -20px;
}
ul#categories li {
width: 100%;
float: left;
margin: 0;
background: #fff;
}
ul#categories a {
padding: 10px;
width: 200px;
}
ul#categories li:hover{
background: #000;
}
ul#navigation li:hover > ul,
#navigation ul li:hover > ul {
display: block; /* display the dropdown */
}
#navigation a {
font-family: 'Montserrat';
color: #474747;
text-decoration: none;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 10px;
}
li a:hover {
color: #000;
font-family: 'Montserrat';
}
ul#categories li a:hover {
color: #fff;
}
<div id="bar">
<div id="navigation">
<ul id="nav">
<li>Home</li>
<li>
Categorieën
<ul id="categories">
<li>travel</li>
<li>Beauty</li>
<li>Fashion</li>
<li>Lifestyle</li>
<li>Persoonlijk</li>
<div class="clear"></div>
</ul>
</li>
<li>
Over mij
<div class="clear"></div>
</li>
<li>
Contact
<div class="clear"></div>
</li>
<li>
Zakelijk
<div class="clear"></div>
</li>
</ul>
</div>
The problem is that your 2nd level menu is too low from your top level :
#navigation li ul {
display: none;
position: absolute;
max-width: 140px;
top: 40px;/* Change this to a lower value so it overlaps or doesn't leave a gap with menu above*/
left: -20px;
}
When the cursor moves to the gap, it's no longer at the 'hover' state, so the dropdown disappears. Reducing the gap will fix the problem.
I'm having trouble with adding space to the hovered "home" right/left.
Adding proper spacing so after the hovered section of "home" appears that about and the other pages would follow.
CSS:
nav {
width:460px;
height:50px;
background-color:#0066ff;
float: left;
margin: 15px 0 0 324px;
position: fixed;
}
nav ul {
margin: 0;
padding: 0;
position: fixed;
width:493px;
border: 1px solid green;
}
nav li {
float: left;
text-align: left;
margin:0;
padding: 0 0 0 24px;
display: block;
width: 51px;
height: 50px;
}
nav li:first-child {
float: left;
text-align: left;
margin:0;
padding: 0 15px 0 0;
display: block;
height: 50px;
}
nav a:first-child {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav a {
margin: 0;
padding: 0;
height: 50px;
min-width:51px;
display:block;
position: fixed;
line-height:50px;
float: left;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
color:#fff;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}
This problem has been giving me headaches for hours.
Link Update
The blue space beside about can't happen.
Nick, your issue is in the li:first-child selector. Specifically the padding attribute, where it clears the padding, where you're missing the spacing.
Many of your :first-child selectors are redundant, and don't need to be re-specified.
Mixing position:fixed with float:left is generally not a good idea as your CSS will be fighting layout structure.
You only need a position:fixed for the main container, the rest the nav's children will be relative to that.
There's a lot of unnecessary padding and such, you should use your browser's DOM inspector to play with the layout.
Check this JSFiddle that's cleaned it up.
A lot of the time, a small <div> is placed to the left of the "home" link to push it over like so:
#fillerdiv{
width:20px;
background-color:#0066ff;
}
then you could place it like so:
<nav>
<ul>
<div id="fillerdiv"></div>
<li> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
That produces this:
Or you could give the "home" button a specific class and add extra padding for it alone.
#home{
padding-left:20px;
}
And the HTML:
<nav>
<ul>
<li id="home"> Home</li>
<li>About</li>
<li>Work</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
I played around your code a bit and tried to simplify it. I hope you don't mind.
JSFiddle
/* styles.css */
nav {
float: left;
background: #0066ff;
border: 1px solid green;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
float: left;
display: block;
}
nav a {
margin: 0;
padding: 0;
padding:20px;
color:#fff;
text-align: center;
}
nav ul li a:link, nav ul li a:visited {
text-decoration: none;
display:block;
}
nav ul li a:hover, nav ul li a:active {
background: #929292;
text-decoration: none;
display:block;
}