I would like a topbar navigation, similar to one that you see with Foundation. The problem i'm having is that i've set margins for the page and dont know how to override them?
So for most of page (body) I need these margins but for the top bar i'd like it extending the full width of the browser.
Here's the code:
body {
font-family: 'Droid Sans', sans-serif;
font-size: 1.2em;
color: #000000;
background-color: white;
margin: 0em 6.5em 3.5em;
#nav ul {
width: 100%;
background-color: #212121;
font-size: 12px;
font-weight: bold;
color: white;
text-align: left;
display: block;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#nav ul li {
display: inline-block;
margin-right: -4px;
height: inherit;
margin-left: 20px;
position: relative;
padding: 15px 20px;
background: #212121;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#nav ul li:hover {
background: #212121;
color: #fff;
}
#nav ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#nav ul li ul li {
background: #212121;
display: block;
color: #fff;
}
#nav ul li ul li:hover { background: #212121; }
#nav ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Html:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Venue</li>
<li>Events</li>
<li>Stalls
<ul>
<li>Food</li>
<li>Arts & Crafts</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Besides using absolute positioning, you can just use negative margins for the #nav like this:
#nav {
margin-left:-6.5em;
margin-right:-6.5em;
}
Demo
Apply the following css for the header,
#nav{
position:absolute;
left:0;
right:0;
}
It's take the nav out of normal flow and stretch it from left to right.
Check this JSFiddle
If you set position:fixed; width:100%; then the header will be taken out of the normal flow and will be positioned relative to the window. It'll stay where it is even if the user scrolls down the page.
Use fixed positioning for the navigation bar you want at the top of your page.
#nav {
min-width:100%;
position:fixed;
top:0;
left:0;
}
Adding a min-width of 100% should ensure the navigation bar stretches across the width of your page. Setting top and left to zero, in conjunction with position:fixed, would anchor the nav div to the top-left.
Related
I'm new to HTML and CSS, and this is my first project.
I have this "space" near the end of the navbar and it forces the next link to break into a new line. Also, I cannot find a solution that removes the gap between the background image and the navbar no matter the screen size.
I'm not able to pinpoint what is causing these problems, and I'm sure it's just some petty mistake.
navbar http://prntscr.com/g0xi6z
.topnavhome nav {
position: relative;
display: block;
margin: 0px;
background-color: #333333;
overflow: hidden;
text-align: justify;
font-size: 0px;
min-width: 500px;
width: 100%;
}
.topnavhome:after {
content: '';
display: inline-block;
width: 100%;
}
.topnavhome .li {
display: inline-block;
}
.topnavhome nav li a {
float: left;
display: block;
padding: 12px;
width: 180px;
margin-bottom: -1.5px;
color: #f2f2f2;
border-left: solid 3px #333333;
text-align: center;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 20px;
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
}
.topnavhome nav a:hover {
background-color: #046A78;
color: white;
border-left: solid 3px #79CBD6;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
<ul class="topnavhome" id="myTopnav">
<nav>
<li>Home</li>
<li>Network Security</li>
<li>Passwords</li>
<li>Firewalls</li>
<li>Encryption</li>
<li>Biometric Devices</li>
<li>References</li>
</nav>
</ul>
Fix Error:
* {
box-sizing: border-box;
}
More css for setting nav use :
.topnavhome {
padding: 0;
}
And define height for nav and a element.
body, ul {
margin:0;
}
* {
box-sizing: border-box;
}
.topnavhome {
padding: 0;
}
.topnavhome nav {
position: relative;
display: block;
margin: 0px;
background-color: #333333;
overflow: hidden;
text-align: justify;
font-size: 0px;
min-width: 500px;
width: 100%;
height: 90px;
}
.topnavhome:after {
content: '';
display: inline-block;
width: 100%;
}
.topnavhome li {
display: inline-block;
}
.topnavhome nav li a {
float: left;
display: block;
padding: 12px;
width: 180px;
margin-bottom: -1.5px;
color: #f2f2f2;
border-left: solid 3px #333333;
text-align: center;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 20px;
-webkit-transition: background .3s linear;
-moz-transition: background .3s linear;
-ms-transition: background .3s linear;
-o-transition: background .3s linear;
transition: background .3s linear;
height: 90px;
}
.topnavhome nav a:hover {
background-color: #046A78;
color: white;
border-left: solid 3px #79CBD6;
-moz-transition: background-color 0.01s;
-webkit-transition: background-color 0.01s;
-o-transition: background-color 0.01s;
transition: background-color 0.01s;
}
<ul class="topnavhome" id="myTopnav">
<nav>
<li>Home</li>
<li>Network Security</li>
<li>Passwords</li>
<li>Firewalls</li>
<li>Encryption</li>
<li>Biometric Devices</li>
<li>References</li>
</nav>
</ul>
About a "space" near the end of the navbar which forces the next link to break into a new line, you have this problem cause there is not enough place to fit in, you need to use "#media queries", so that when you would reduce width it would fit nicely. For example on my screen I do not have such problem
Here are a link for good examples of using #media-query
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
And next, you have your <ul> height greater than <nav> in it. And the reason why expanding height of nav wouldn't help is that you have content after your <ul>, which is taking a gap place after nav.
just delete that line:
.topnavhome:after {
content: ''; <------- delete this one
display: inline-block;
width: 100%;
}
you have fixed width of 180px to .topnavhome nav li a which making the li to stack down as they doesn't fit in the container width.
Try using flex which will equally divide the width to li
nav { display: flex;}
nav li { flex: 1;}
Please try below code.
Here your css is not working well it's due to all li element's are not fitting in container due to this reason displaying in new line.
Just add below classes.if it's already their then update the properties.
ul#myTopnav {
-webkit-padding-start: 5px;
}
Here i have only made changes in width & padding.
.topnavhome nav li a {
padding: 12px 6px 12px 6px;
width: 172px;
}
One more thing is used #media query if it's not fitting in small screen or larger screen.
Hope this helps.
Consider the following nested list:
<div >
<ul class="main">
<li>Fist item<ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul>
</li>
<li>Second item<ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li>
<li>Third item<ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul>
</li>
</ul>
</div>
I want the outer level displayed horizontally, and the inner level displayed just below the outer one. To this aim I've used relative and absolute position for outer and inner lists in the css style:
#container {width:300px}
main {width:200px;position:relative;}
body > div > ul > li {display:block;float:left;padding:5px;}
body > div > ul > li > a:hover + .ab {display:block;}
.ab {display:none;clear:both;position:absolute;left:0px}
It works fine unless you resize container width to 200px (as you can try on JSfiddle) (I have to achieve a solution working with different widths). In this case the inner level container overlaps the outer one. I wonder if it is possible to force the inner container to be displayed after the outer container through css or solve this issue in another way.
Edit: I need to make my question clearer because given answers so far show the same proposal I have already made. So i've made a little addition in the css styles declaring a box for the inner container (here the update JSfiddle snippet). The key issue is that my toy example simulates the left column in a more complicated web page. I do not know in advance the exact width of such a column (maybe 150px, maybe 200px or something similar) and I do not know in adcance the length of the titles for the outer list elements. I need a solution that works for whichever width the outer container could have.
This is a screenshot of what I obtain in the default case:
This is what I obtain narrowing the outer container to 200px (try yourself on JSfiddle):
and this is instead what I want to obtain:
I hope to have been my question clear now.
U need to make outer level positioned to relative and inner level as absolute, like this:
#container {width:300px}
.ab {
display:none;
clear:both;
position:absolute;
left:0px
}
body > div > ul > li {
display:block;
float:left;
padding:5px;
position:relative;
}
body > div > ul > li > a:hover + .ab {
display:block;
position:absolute;
left:0; /* So it aligns to the left edge of outer level */
top:100%; /* So inner level isn't overlaping outer */
}
main {width:200px;position:relative;}
Example here: https://jsfiddle.net/d9fsff69/2/
To ensure flexibility, make sure your widths are not fixed. And the rest is a matter of margin. I added some background coloring for visual aid:
Use this CSS:
#container {
width: 100%
}
main {
width: 200px;
position: relative;
}
body > div > ul > li {
display: block;
float: left;
padding: 5px;
background:#999;
}
body > div > ul > li > a:hover + .ab {
display: block;
background:#ddd;
margin-top: 5px;
}
.ab {
display: none;
clear: both;
position: absolute;
left: 0px
}
Here is the DEMO
I would just give you similar example:
body {
margin: 0px;
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
width: 100%;
text-align: center;
display: inline-block;
margin: 0px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
background: #000;
color: #fff;
}
ul li {
font: 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 20px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
color: #71b51e;
background: #161616;
}
ul li ul {
padding: 0;
position: absolute;
left: 0;
top: 57px;
width: 140px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #161616;
display: block;
color: #fff;
text-align: left;
padding: 5px 15px;
height: 25px;
}
ul li ul li:hover {
background: #111;
color: #71b51e;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>OPTION
<ul>
<li>SUB-1</li>
<li>SUB-2</li>
<li>SUB-3</li>
<li>SUB-3</li>
</ul>
</li>
<li>OPTION</li>
<li>
OPTION
<ul>
<li>SUB-1</li>
<li>SUB-2</li>
<li>SUB-3</li>
<li>SUB-3</li>
</ul>
</li>
<li>OPTION</li>
</ul>
I'm trying to make a navigation bar for a hobby website to display my photography and other interest's of mine, I'm having slight issues with the position of a drop-down bar I have.
I wanted to know how I would be able to position the drop down menu so when I hover over the music item it would show directly under it. I tried position: relevant, it did work but it shifted all the items to the left of it down to align with the drop down menu.
http://jsfiddle.net/daCrosby/Ly8wuws1/
body{
background-color: #333;
}
nav ul {
list-style: none;
margin: 10px;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
nav li {
display: inline-block;
margin: 0 5px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav a {
color: black;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav a:hover {
color: #12242d;
}
nav span {
display: block;
color: rgba(255,255,255,0.6);
}
.Inav ul {
list-style: none;
margin-top: 20%;
padding: 0;
text-align: left;
top: 0;
left: 0;
position: fixed;
right: 0;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.Inav nav ul li {
display: inline-block;
margin: 0 5px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.Inav nav a {
color: black;
position: block
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
text-decoration: none;
}
.Inav nav a:hover {
color: #12242d;
}
.Inav nav span {
color: rgba(255,255,255,0.6);
}
.Inav ul li:hover ul{
display: block;
margin: 0px;
padding: 0px;
}
.Inav ul li ul{
display: none;
position: absolute;
}
.Inav ul li ul li{
display: block;
}
.Inav ul ul a{
color: white;
}
<div class="Inav">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>FAQ</span></li>
<li><span>Honesty</span></li>
<li><span>Rand2</span></li>
<li><span>Rand3</span></li>
<li><span>Music</span>
<ul>
<li>Kanye</li>
<li>Drake</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to add position: relevant to the parent list items, then add positioning top and left on the sub menu.
nav li {
position: relative;
}
.Inav ul li ul{
position: absolute;
top: 100%; /* modify as necessary */
left: 0px; /* modify as necessary */
}
http://jsfiddle.net/daCrosby/Ly8wuws1/1/
I am using this CSS Code for a HTML menu:
#CustomerMenu {
margin-bottom:35px;
}
#CustomerMenu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
-moz-box-shadow: 0 0 5px rgba(243, 111, 37, 5);
box-shadow: 0 0 5px rgba(243, 111, 37, 5);
}
#CustomerMenu ul li {
display: inline-block;
position:relative;
}
#CustomerMenu ul li a {
font: bold 12px/18px Arial;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FFFFFF;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#CustomerMenu ul li a:hover {
background: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li:hover > a {
background-color: #F36F25;
color: #FFFFFF;
}
#CustomerMenu ul li ul {
padding: 0;
position: absolute;
z-index:999;
top: 34px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#CustomerMenu ul li ul li a {
background: #666666;
display: block;
color: #FFFFFF;
width:100px;
}
#CustomerMenu ul li ul li a:hover {
background: #F35F25;
}
#CustomerMenu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
i want to make each <li> link a certain width whether it be a percentage or fixed
Also, can i make the menu responsive, whats the best jway to do this?
http://jsfiddle.net/ko69pyLz/
Use media queries
i am not adding full code, just showing how you can proceed, there are plenty of tutorials available in online.
#media screen and (min-width:0px) and (max-width:480px),
screen and (min-device-width:0px) and (max-device-width:480px){
#CustomerMenu ul li {
display: block;
}
#CustomerMenu ul li a {
font: bold 24px/36px Arial;
}
}
JSfiddle - resize the browser to atake effect
http://jsfiddle.net/ko69pyLz/5/
As the user Manjunath Siddappa stated, I'm not adding full code, or in this case, my example won't be using your code.
For the sizing part of it, you will need to use media queries, but since you want a mobile nav, you most likely want it to pull up into one large drop down bar, and that's where this comes in..
This code will help you create a mobile nav that can get vertically stacked/hidden, and then uses a onClick jQuery function to open and close the options.
JsFiddle: http://jsfiddle.net/qy6a185b/
I've got a menu made that utilizes left and right borders to separate each menu item. When hovering over the menu, the background changes to a lighter shade, which is what I want. However, hovering also covers the left border. How can I stop the border from disappearing? I'm sure this has been answered elsewhere, but I couldn't find it. Thanks, in advance.
http://jsfiddle.net/aYsKp/2/
HTML:
<div id="header">
<div id="menu">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>VIDEOS
</li>
<li>DOWNLOADS
</li>
<li>CONTACT
</li>
<li>ABOUT
</li>
</ul>
</div>
</div>
CSS:
#header {
width:960px;
margin: 10px auto 5px auto;
background-color: #727272;
}
#menu {
max-width:828px;
bottom:0;
right:0;
font: 12px/18px sans-serif;
}
#menu a {
text-decoration: none;
display:block;
padding: 10px 32px;
color:#FFF;
}
#menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menu ul li {
display: inline-block;
margin-right: -4px;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border-right: 1px solid #FFF;
}
#menu ul li:first-child {
border-left: 1px solid #FFF;
}
#menu ul li:hover {
background-color:#818181;
}
Try this approach.
#header {
width:960px;
margin: 10px auto 5px auto;
}
#menu {
max-width:828px;
bottom:0;
right:0;
font: 12px/18px sans-serif;
background-color: white;
}
#menu a {
text-decoration: none;
display:block;
padding: 10px 32px;
color:#FFF;
}
#menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
background-color: #727272;
margin:0;
}
#menu ul li:hover {
background-color:#818181;
}
What I've done is just removed right margin and specified background color as white for the menu div.
I use to set border or space informations in A tag, not in LI, making LI like an "invisible" tag, setting all properties to A, using A display:inline-block.