I'm using a CSS navbar that has drop down menus. I had a problem with scaling on my site, but some helpful users here helped me fix it. The solution they gave me was to change the position attribute to absolute.
This works fine for text boxes and images, but changing the navbar code to absolute breaks it and makes some of the buttons go to a second line.
Is there a way to stop this from happening and also stop the navbar from bugging out when the page is resized? Sorry if this is hard to understand. This is my navbar CSS, the HTML is just a list:
Jsfiddle: http://jsfiddle.net/qN8sm/embedded/result/
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 150;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
What you could try is set min-width:(amount of pixels)px. This sets the minimum width for an element, but if unless you set a max-width, it can upscale.
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I am trying to vertically stack a sub-menu, however, I am having trouble getting it to stack possibly due to some of the parent styling. The goal is for the sub-menu to stack vertically underneath the very first link. Any advice?
JSFIDDLE
CSS
nav {
height: 70px;
background: transparent;
}
nav ul {
display: inline-block;
list-style: none;
height: 70px;
float:right;
}
nav ul li {
display: inline-block;
background: transparent;
float: left;
padding: 0px 10px;
padding-top: 23px;
height: 43px;
border-top: 4px solid $White;
}
nav ul li:first-child {
border-top: 4px solid $White;
}
nav ul li a {
font-family: 'Lato', serif;
font-size: 14px;
color: $TextColor;
line-height: 122%;
letter-spacing: 1.5px;
padding-left: 0;
}
nav ul ul {
display: block;
}
nav ul ul li {
display: block;
}
nav ul ul li a {
display: block;
}
Man, you really need to learn what you are doing. It was quite some effort to correct your code. For a start, you seem to be unaware of the fact that
nav ul { ... }
will not only affect your outer <ul>, but also your inner <ul id="submenu">.
The fact that you use id="submenu" strongly suggests that the next thing you might be unaware of is that per HTML document, any given id value must be unique, that is it can only be used on one element.
https://jsfiddle.net/gmtugks5/2/
I have an header with 100% width, and a nav inside header with 980px
Now i want to give the position as fixed for both header and nav.
I have tried with the following code but could'nt get what i wanted to
Please help me,
my header.css
width:100%;
height:60px;
background: #ffffff;
position:fixed;
z-index:999;`
and my nav.css
background: #ffffff;
height: 60px;
text-align:center;
position:fixed;
z-index:99;
.nav ul
margin:0;
padding:0;
.nav li
display: inline-block;
list-style-type: none;
vertical-align:middle;`
.nav li a
font-size: 16px;
color: black;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
If the nav is inside the header you don't need position:fixed in your nav.css, you should also remove the z-index. A clearer description of the problem and the html you're using would be helpful if that doesn't help.
#Fastnto, it's something like this that you want?
http://jsfiddle.net/alexandrecanijo/NBp8F/
I've changed some parts of your original CSS in order to show the header (#ccccccc) and nav (#000000) and added the .content with enough lorem ipsum so that you are able to see the nav.
But, the CSS might be cleaned and refactored in some parts... Didn't had a change to do this...
Hope this helps.
html,body, p {
margin: 0;
padding: 0;
border: 0;
font: 14px arial;
}
.header {
width: 100%;
height: 80px;
background: #cccccc;
position: fixed;
z-index:999;
margin: 0;
clear: both;
top: 0;
}
.nav {
background: #000000;
height: 60px;
text-align:center;
z-index:99;
}
.nav ul {
margin:0;
padding:0;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
font-size: 16px;
color: #fe6700;
display: block;
line-height: 60px;
padding: 0 10px;
text-decoration: none;
}
.nav li a:hover {
color: #000000;
background: #fe6700;
}
.content {
margin-top: 80px;
}
After following a couple of tutorials I have managed to build up a CSS-only vertical drop-down menu. However, the widths and absolute offsets are hardcoded and I cannot get them to adjust automatically according to their contents. I wish to avoid hardcoding these because I wish to integrate it into a CMS where I don't know the actual lengths of the menu items.
I have created a JSFiddle here showing the menu working: http://jsfiddle.net/nhfHw/2/
The top level items are currently hardcoded to a width of 100px (I wish to make this adjust according to the longest item at that level.) When I tried to remove that, it just expanded the next sub-level all over the screen.
#navigation
{
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
width: 100px; /* I wish to remove this */
margin-top: 30px;
}
The x offset of the sub-levels is also hard-coded. I wish them to just adjust according to their parent's width. Their width is also hardcoded to 200px.
li:hover .sub-level
{
background: #D0D0D0;
display: block;
position: absolute;
left: 100px; /* I wish to remove this */
top: 0px;
}
li:hover .sub-level .sub-level
{
left: 210px; /* I wish to remove this */
top: 0px;
}
ul.sub-level li
{
border: none;
float:left;
width: 200px; /* I wish to remove this */
}
I wish to avoid Javascript if possible.
A combination of display: inline-block and white-space: nowrap I believe gets you what you're looking for: http://jsfiddle.net/nhfHw/14/
#nav {
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #707070;
line-height: 20px;
margin-top: 30px;
}
#nav ul li {
padding: 1px 5px;
list-style: none;
white-space: nowrap;
display: block;
position: relative;
}
#nav ul li:hover {
background: #E0E0E0;
}
#nav ul li a {
text-decoration: none;
color: #707070;
display: block;
}
#nav ul ul {
display: none;
border-left: 1px solid #ccc;
position: absolute;
left: 100%;
top: 0px;
}
#nav ul li:hover > ul {
display: block;
}
Here just what the answer above me did, but without bugs...
http://jsfiddle.net/techsin/UBgZf/2/ Updated
*{padding:0;margin:0;}
.main{position:relative;}
ul ul{
display:none;
position:absolute;
left:100%;
margin-top:-30px;
}
.main>li>ul{
background-color:#BDBDBD;
}
ul {
white-space: nowrap;
color:white;
background-color:gray;
float:left;
}
li{
height:20px;
list-style-type:none;
padding:10px;
clear:both;
}
li:hover>ul{
background-color:black;
display:block;
}
Tricks include:
White Space No wrap
float
absolute positioning so it always refer to first element that has been positioned either absolute or relative.
I'm having some trouble with changing a CSS drop down menu to a drop up menu. I think I'm almost there, but for some reason some of the buttons are not displayed correctly (the text is moving downwards, but the menu is moving upwards). See crisislab.nl for the code in action.
Any help would be much appreciated!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
}
#navigation li:hover {
background: transparent url(gfx/navigation_hover.png) repeat;
}
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover {
text-decoration: none;
}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
bottom: 38px;
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
When having a hard time finding bugs, always replicate and break the code into smallest simplest chunks.
Hope this would help: http://jsfiddle.net/ccS7q/
But you wouldn't be able to achieve drop up menu with the sublists listing upwards unless you use jquery or javascript with it. The fiddle above can't do listing upwards, you could though adjust manually the ul li.menu-item ul top value as the listing lengthens. Though its a lot of work. I would advise you to use jquery instead.
Remove that bottom: 38px; from below code:
#navigation li:hover ul {
bottom: 38px;/*Just Remove This*/
display: block;
}
Add top:0 to #navigation ul li ul li
#navigation li ul li {
background: none repeat scroll 0 0 transparent;
top: 0;/*Add This*/
width: 100%;
}
I think this will help you.