So I am trying to build my navbar and I seem kind of stuck. I've been trying to get a solid yellow line about 3-5px thick underneath my navbar.
I remember I have made a navbar in the past that looked like what I am trying to do but I forgot how to do that and I have lost that document.
So I have used: nav::after and tried border-bottom but it does not do anything..
nav {
background:black;
margin:0;
width:100%;
padding: 20px;
display: block;
}
nav::after {
border-bottom: 8px solid green;
content: '';
position: absolute;
left: 0;
right: 0;
width: 100%;
bottom: 0;
margin: 0 auto;
}
nav ul .nav-links {
float:right;
margin-top:20px;
margin-right:40px;
}
nav ul {
list-style-type:none;
}
nav li {
display: inline-block;
color:white;
margin-right:30px;
}
nav a {
color:white;
text-decoration:none;
float:right;
transition:.2s ease-in-out;
font-weight:700;
}
nav a:hover {
color:#FFE600;
}
.nav-title {
line-height:30px;
}
<nav id="nav">
<ul>
<li class="nav-title"><h2>text text</h2><h4>is a text, text text text</h4></li>
<div class="nav-links">
<li>About</li>
<li>Statistics</li>
<li>What can you do?</li>
</div>
</ul>
</nav>
#nav{
position: relative;
}
You need to use the "#" css selector, to specify, you are referring to the element with the id => nav. (it look cleaner)
Position relative means, the child element will be absolutely positioned RELATIVE to the parent. (which has this attribute setted)
You don't need '::after'--you can remove that. The border-bottom of the div will automatically be shown at the bottom of the div.
Related
This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>
Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:
Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}
you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions
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 have to code a Website for my term paper and I really have no clue how to get my Links in the navigationbar in the middle of my box.
I already looked it up on the Internet but I didnt managed to fix it. It would be cool if someone could at least give me a hint :)
nav {
background-color: lightblue;
position: absolute;
height: 5%;
width: 100%;
top: 0%;
left: 0%;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
}
nav ul li a {
text-decoration: none;
float: left;
display: table-cell;
padding-right: 30px;
color: black;
}
nav ul li a:hover {
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Products
</li>
<li>Contact us
</li>
</ul>
</nav>
http://jsfiddle.net/y6L589f7/1
It would be really nice because I need it but I really dont get it.
Instead of specifying a height for the nav bar, you could remove the height and add padding to the links to give the bar it's height:
nav {
background-color:lightblue;
position:absolute;
width:100%;
top:0%; left:0%;
}
nav ul li a {
text-decoration:none;
float:left;
display:table-cell;
padding:15px 30px 15px 0;
color:black;
}
Updated Fiddle
I'm creating a horizontal menu with an effect on user hover. When the user hovers over a link it would create a red background that is a bit bigger than the menu banner itself.
I have this to illustrate my point: http://jsfiddle.net/65466g17/
I tried using padding and a margin, but no avail. Is there some other alternative for this scenario?
HTML:
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>ABOUT</li>
<li>PRODUCTS</li>
<li>MONITORING</li>
<li><div id="imgBox"></div></li>
<li>TESTIMONIALS</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</div>
CSS
#menu-outer {
background-color: rgba(0,0,255,0.6);
z-index:100;
position:absolute;
top:80px;
width:100%;
min-width: 1200px;
max-height: 60px;
}
#menu {
display: flex;
align-content: center;
justify-content: center;
font-family: "Menu Font", "Info Box",Verdana;
font-weight: 800;
font-size:medium;
}
ul#horizontal-list {
list-style: none;
padding:0;
}
ul#horizontal-list li {
display: inline-block;
}
#menu a{
text-decoration:none;
float:left;
color:black;
padding:2px 15px;
white-space:nowrap;
}
#menu a:hover{
color:#fff;
background:red;
padding:30px 5px;
margin-top: -28px;
}
As can be seen, increasing the height or adding padding/margin to the hovered link may affect the layout.
Instead, we can use ::before/::after pseudo-elements to achieve the desired effect. It can be done by positioning the pseudo-element absolutely and playing with top/right/bottom/left offsets as follows:
#menu a {
text-decoration:none;
float:left;
color:black;
padding:1em;
white-space:nowrap;
position: relative;
}
#menu a:hover {
color: #fff;
}
#menu a:hover:before {
content: "";
position: absolute;
top: -.5em;
bottom: -.5em;
left: 0;
right: 0;
background:red;
z-index: -1;
}
Note that in this case, a elements MUST have a position of relative (anything other than static) to establish a containing block for absolutely positioned pseudo-elements.
Also, adding z-index: -1 to our pseudo-elements make them appear behind the contents of the links.
#menu-outer {
background-color: rgba(0,0,255,0.6);
z-index:100;
position:absolute;
top:80px;
width:100%;
min-width: 1200px;
max-height: 60px;
}
#menu {
display: flex;
align-content: center;
justify-content: center;
font-family: "Menu Font", "Info Box",Verdana;
font-weight: 800;
font-size:medium;
}
ul#horizontal-list {
list-style: none;
padding: 0;
margin: 0;
}
ul#horizontal-list li {
display: inline-block;
}
#menu a{
text-decoration:none;
float:left;
color:black;
padding:1em;
white-space:nowrap;
position: relative;
}
#menu a:hover {
color: #fff;
}
#menu a:hover:before{
content: "";
position: absolute;
top: -.5em;
bottom: -.5em;
left: 0;
right: 0;
background:red;
z-index: -1;
}
<div id="menu-outer">
<div id="menu">
<ul id="horizontal-list">
<li>ABOUT</li>
<li>PRODUCTS</li>
<li>MONITORING</li>
<li><div id="imgBox"></div></li>
<li>TESTIMONIALS</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</div>
I fixed your fiddle giving an absolute positioning to #menu a:hover,
take a look http://jsfiddle.net/maio/65466g17/5/,
position: absolute takes the element out of the document flow so it won't affect any other element
It can be tricky to get negative margins working with lists. How about a nice transform?
#menu a {
text-decoration:none;
color:black;
padding: 20px 15px;
white-space:nowrap;
display: inline-block;
height: 60px;
box-sizing: border-box;
transition: transform 0.3s; /* adjust transform duration here */
}
#menu a:hover {
color:#fff;
background:red;
-webkit-transform: scale(1.2); /* adjust transform size here */
-ms-transform: scale(1.2); /* adjust transform size here */
transform: scale(1.2); /* adjust transform size here */
}
Demo
I have a div(bottom) at the bottom of my page.
It has a background image and another div(bottomnav) with an unordered list for the navigation.
When I change bottomnav's position to absolute the entire bottom div gets shifted up into the div above it. also, i have another div called cc. that one i can change to absolute without any problems.
This is my code:
html
<div id="bottom">
<div id="bottomnav">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="cc">©2014 European Homemakers</div>
and this is my css:
#bottom
{
background-image:url(../Images/home_bottom.png);
width: 960px;
margin-left:auto;
margin-right:auto;
min-height: 100px;
background-repeat:no-repeat;
position:relative;
}
#bottomnav
{
font-size: 20px;
}
#bottomnav ul {
list-style-type: none;
height:auto;
}
#bottomnav li
{
display:inline;
padding:20px;
}
#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc
{
text-align:right;
color: #FF9200;
position:absolute;
bottom: 5px;
right: 5px;
font-size:20px;
}
Im pretty new to web design so Im not sure why changing bottomnav to absolute changes the layout.
Working Fiddle
First of all you are not closing #bottom div, Secondly as #bottom is position: relative so any thing inside it will be absolute relative to this div. Therefore, remove footer div out of it.
HTML
<div id="bottom">
<div id="bottomnav">
<ul>
<li>Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="cc">©2014 European Homemakers</div>
CSS
#bottom {
background-image:url(../Images/home_bottom.png);
width: 960px;
margin-left:auto;
margin-right:auto;
min-height: 100px;
background-repeat:no-repeat;
position:relative;
}
#bottomnav {
font-size: 20px;
}
#bottomnav ul {
list-style-type: none;
height:auto;
}
#bottomnav li {
display:inline;
padding:20px;
}
#bottomnav a {
text-decoration: none;
color: #FF9200;
}
#cc {
color: #FF9200;
font-size:20px;
position: absolute;
bottom: 5px;
right: 5px;
}
If you are expecting for footer to always be at bottom regards the content, then this will help you.
DEMO
You need to change you structure.