In my navagation bar, I want only hovered on elements to stretch out and change color, but it seems the whole navagation bar stretches. I've tried changing what must be hovered on to trigger the animation, but nothing seems to be working. Can you identify and correct my error?
#keyframes mouse {
0% {
background-color: #35B1C2;
height: 40px
}
100% {
background-color: #2F9EBD;
height: 60px
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:hover {
animation-fill-mode: forwards;
animation-duration: 0.5s;
animation-name: mouse;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
You can remove the overflow:hidden and add
overflow:visible;
height:45px; /* The height of your navbar */
to your ul element.
Try this:
ul, li a:hover {
font-size: 30px;
color: red;
}
There is actually no error in your code. What happens is that the ul box contains the li boxes. So, when you hover on a li box and the li box's height increases from 40px to 60px, the ul box that is containing that box also stretches out because it needs to contain the li box.
So, you just need to work around that issue. I'd suggest not using the ul box at all, but that's just something I think is more efficient because you realize you don't actually really need it (you'd still need to contain the navigation bar inside of a box, maybe a div or header).
You have not set a nav bar heigh. So when the li height change on hover, the navbar will adjust its height to fit the content. Instead of going with animation, I would do this with a simple transition. Add a min-height to the navbar and apply a transition property to the ul tag. Also apply an overflow:visible on hover
See snippet below
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #35B1C2;
min-height: 50px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li :hover {
background-color: #2F9EBD;
height: 60px;
transition: all 1s;
}
ul:hover {
overflow: visible;
}
li {
border-right: 1px solid #bbb;
transition: all 1s;
}
li:last-child {
border-right: none;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
</ul>
</body>
</html>
Related
My navbar gets chopped off from both sides whenever I resize the window, like in this picture.
Chop chop
I want the navbar to fit the entire screen, even when the window is resized, so that all the links and logo are visible.
I tried making the width 100vw but it has no visible effect.
Here is my HTML and CSS:
<header>
<nav>
<ul>
<li><div class="container"><img src="https://i.ibb.co/SP0TLzQ/broozeb.png" alt="logo" class="logo" border="0"><div class="overlay"><div class="text-test">米</div></div></div></li>
<li>ホーム</li>
<li>米さんについて</li>
<li>日本の文化</li>
<li>学習の情報</li>
<li>English Stuff</li>
</ul>
</nav>
</header>
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav ul li {
list-style-type: none;
margin-left: 5px;
}
nav ul li a {
color: white;
background-color: blue;
display: block;
line-height: 3em;
padding: 2em 4em;
text-decoration: none;
font-weight: bold;
}
nav ul li .logo {
background-color: white;
border-radius: 50%;
margin-left: 10px;
}
nav a:hover {
color: red;
background-color: white;
transition: all 0.3s ease 0s;
}
I'm really sorry to ask such basic questions, but this has been troubling me for a few weeks. I very very much appreciate your help!! My webpage can be found here: https://komesannonihongotabi.neocities.org/culture.html
This is being caused by the following CSS line:
nav ul li a {
padding: 2em 4em;
}
Your a tags have a padding on left and right of 4em. Since em is an absolute unit and not a relative one, it will stay the same on any screen size. That is, unless you change the font-size to be smaller but I don't think that would be a good solution here. Just try adding a relative unit like %, or use a breakpoint as follows:
nav ul li a {
padding: 2em 1em;
}
#media screen and (min-width: 900px) {
nav ul li a {
padding: 2em 4em;
}
}
Another, and maybe better solution to your problem would be to use a sidenav with hamburger icon. This may however be a bit complex for beginners.
What if you remove this line white-space: nowrap; from nav {}
Before
nav {
background-color: blue;
border-bottom: solid #09316b;
white-space: nowrap;
}
After:
nav {
background-color: blue;
border-bottom: solid #09316b; }
It starts to resize now. If you want more info about white space -> Click here -<
I am learning how to make nav bars with drop downs. This works well on Firefox and Chrome, but not in Edge. The problem is that once the drop down has been displayed after the mouse was hovering over it, when the mouse is moved and it's time for it to have display: none, you can still see a tiny amount of the bottom sticking out where the dropdown was. This is only when the ul is floated.
I've removed a lot of css to leave what mainly is essential, but included the whole html, in case anyone wants to just copy and paste into a file to see. I'm am wondering if this is something I've done wrong, or a bug in Edge, and if anyone can tell me how I can prevent this from happening.
<html>
<head>
<style>
.right {
float: right;
}
.nav {
background-color: #444;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
font-size: 1.1em;
display: inline-block;
}
.nav .dropdown {
position: absolute;
display: none;
background-color: #444;
font-size: 0.9em;
}
.nav .dropdown li {
display: block;
}
.nav li:hover ul {
display: block;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a {
padding: 15px 25px 15px 25px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li class="right">Your...
<ul class="dropdown">
<li>Profile</li>
<li>Bookmarks</li>
<li>Songs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I may have been hasty posting this question. I have figured out a way of hiding the problem by adding a border to the nav bar.
.nav {
background-color: #444;
border-bottom: solid #444 thin;
}
I have a menu bar that isn't stretching the entire length of the div it is in. I have 6 main menu options and I want these to stretch across the entire div tag they are in and not just take up the exact spacing of the words. I've tried to set the div and the menu elements to 100% width, but nothing is working. My code is listed below.
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
}
HTML
<div class="testmenu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
Here's an edit I made from your code:
http://jsfiddle.net/fatgamer85/grLkE/
I've added few classes to the list and list items.
I've made the list width 100% to fill the area (I'm assuming menu bar?), then removed the float from list items, made them inline, and added padding to the items
.menu-item{
display: inline-block;
padding: 2%;
}
and this is how it looks:
http://jsfiddle.net/fatgamer85/grLkE/embedded/result/
Hope this helps.
Change
li{float:left;}
to
li{display:inline-block;width:25%;margin:0;padding:0;}
Fiddle here.
you can give the UL a width of 100%, and then the li each a width of 25%
the css that you have compiles to give the testmenu a 100% width, and then YOU have to explicitly tell the UL and LI how much width they should have.
ul {
list-style-type: none;
overflow: hidden;
display:table-row;
}
li {
display:table-cell;
border:1px solid black;
}
a:link,a:visited {
display: block;
width: 100%;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
background-color: #7A991A;
}
.testmenu {
width: 100%;
display:table;
table-layout:auto;
}
I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.
The CSS:
header {
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 100%;
position: absolute;
background: #000000;
}
ul {
list-style-type: none;
display: block;
margin: 0 0 0 20px;
padding: 0;
}
ul li {
display: inline-block;
padding: 0;
}
ul li a{
display: block;
border-bottom: 1px solid #fff;
font-size: 19px;
}
ul li a:hover{
border-bottom: 2px solid #fff;
background: #333;
font-size: 19px;
}
The HTML:
<header>
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
</header>
The JSFiddle:
http://jsfiddle.net/Artsen/EZWvF/
So you want to increase the border-bottom to the top, right?
I've actually had to do this for a website recently. There is no other way than to set specific padding, and border properties.
I edited your jsfiddle here: http://jsfiddle.net/EZWvF/2/ (changed some properties to make the test case more visible)
The principle is: Swap the pixel values from padding-bottom and border-bottom on hover.
These are the key lines to your solution:
ul li a {
border-bottom: 1px solid white;
padding-bottom: 5px;
}
ul li a:hover {
border-bottom: 5px solid white;
padding-bottom: 1px;
}
Note: This only works if you don't add a css-transition. If you unquote the css-transition I put in the fiddle, you'll see that the div still expands to the bottom. If you want a ss-transition you'll need to add a separate div to the li's to mimic a border.
As Tyblitz suggested using extra padding value on :hover works great when you don't need a transition.
If you need transition and don't want to introduce an extra div you can do it using the line-height/height approach for controlling the vertical height.
so instead of doing this:
.nav-element a {
color: gray;
padding: 25px 15px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
do this:
.nav-element a {
color: gray;
padding: 0 15px;
line-height: 70px;
height: 70px;
transition: all ease-in-out 0.2s;
display: block;
text-decoration: none;
}
See example where it doesn't work here
and does work (using the line-height/height) here
I'm using an HTML/CSS menu from the article SuckerFish Dropdowns. My particular menu has a grey background. I am trying to get the menu's background to have a fixed width. I tried adding a width parameter to the #navbar section in the CSS but that didn't seem to do anything. How do I get this fixed width behavior?
HTML
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li>System Set-Up & Status
</li>
<li>NMEA Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li></ul>
</li>
<li>UDP Output
<ul>
<li>Channel 1</li><li>
Channel 2</li><li>
Channel 3</li><li>
Channel 4</li><li></li></ul>
</li>
<li>Baro / PoE
</li>
<li>Advanced
</li>
<li>MOB
</li>
</ul>
CSS
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #cccccc;
color: #000000;
text-decoration: none; }
#navbar li a:hover {
background-color: #999999; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #c0c0c0;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #999999; }
The CSS snippet is here and the HTML snippet is here
jsfiddle of question:
The #navbar is taking the appropriate width, but it does not have a background-color set so by default it is transparent.
Remove background-color from #navbar li a and add it to #navbar instead. You will also have to remove the height and clear your floats for it to work properly:
#navbar {
background-color: #cccccc;
margin: 0;
padding: 0;
overflow: hidden; /*clear floats */
}
Working example: http://jsfiddle.net/UfuG2/
Since you're floating your menu list items, you'll want to put a clearfix on the unordered list. Then you can set the width and background-color on the ul. Check out http://jsfiddle.net/qT7xs/.