I made my website as responsive as possible(don't wanna know something about bootstrap). The only thing that doesn't stay in its place (which needs to stay in the middle). Here is my code:
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
width:55vmax;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {position:absolute;height:100%;width:100%;display:table;padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {display: table-cell;width: 1px;vertical-align: middle;white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
I made a jsfiddle but i can't see that it goes to much to the left like i saw on a tablet.
It is a tablet of work and it has long height. On my website it's better noticable My website If i change the height inside the desktop version. Then you see that the menu goes left and the first menu word disappears.
Is there a way to fix this?
You're overriding default properties without reason.
I tried to clean your css code a little bit, deleting what's not necessary.
I think now works as you expect, if not, specify a little bit more and i'll edit the code to help you understand how to do what you need.
#header {
position:fixed;
display:block;
width:100%;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:8vmax;
max-height:8vmax;
transition: .3s linear;
box-sizing:border-box;
background-color: rgba(243,243,243,1.00);
}
#menuwrapper {
display:block;
float:right;
margin-top:0.35vmax;
margin-right:17vmax;
height:8vmax;
max-height:8vmax;
overflow:hidden;
box-sizing:border-box;
position:relative;
}
#menu {padding: 2.5vmax; word-wrap:break-word;}
#menu ul {word-spacing:2vmax;font-size:1.35vmax;padding:0;padding-bottom:0vmax;margin: 0 1vmax;}
#menu li {display:inline-block;padding: 0vmax;}
.rechts {vertical-align: middle; white-space: nowrap;}
#menu ul li a {height:8vmax;text-decoration:none;color:grey;transition: color .45s ease-in-out;margin-right:7.5vmax;}
#menu ul li a:hover {color:#3f92c3;}
<div id="header">
<div id="menuwrapper">
<div id="menu">
<ul class="pad">
</ul>
<ul class="rechts">
<li><a class="a1" id="page1" href="javascript:;">Services</a></li>
<li><a class="a1" id="page2" href="javascript:;">Portfolio</a></li>
<li><a class="a1" id="page3" href="javascript:;">Contact</a></li>
</ul>
</div>
</div>
</div>
Related
This is a problem which I stumbled upon recently quite often in CSS. Lets assume we have a flyout menu somewhere in the page which has list items. Those list items have sub-menus which are shown on hover. Because I want the sub-menu to appear right below the parent list item I give position:relative; to the parent item and position:absolute;top:0; to the submenu. So far this works great.
However because of position:relative; now I have lost the ability to make the submenu 100% width of page width and to use left:0; in the sense that the submenu is aligned to the very left of the page not of the parent element.
What I want is to somehow have position:relative; on the parent for the vertical alignment, but position:inherit; regarding the horizontal alignment.
See the following example - the submenus are aligned correctly in vertical terms but should start to the very left in horizontal terms:
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
width:100%;
background-color:yellow;
list-style-type:none;
}
#my-menu-inner > ul > li {
float:left;
position:relative;
padding:20px;
border:1px solid black;
margin:20px;
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:60px;
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
display:block;
}
<div id="whatever">Just something before ...</div>
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
<span>foo</span>
<div class="sub">
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
</li>
<li>
<span>foo</span>
<div class="sub">
<ul>
<li>please</li>
<li>alignme</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
How can I achieve what I want (please only pure CSS, answers involving JS will not be accepted)?
Make the menu item positioned relatively to the ul rather than the li:
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
padding:20px;
border:1px solid black;
margin:20px;
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:calc(100% - 20px);
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li:hover > div.sub, #my-menu-inner > ul > li:focus > div.sub {
display:block;
}
<div id="whatever">Just something before ...</div>
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
<span>foo</span>
<div class="sub">
<ul>
<li>hello</li>
<li>world</li>
</ul>
</div>
</li>
<li>
<span>foo</span>
<div class="sub">
<ul>
<li>please</li>
<li>alignme</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
So I added the current CDN files of Bootstrap to my code but when I did, the main navigation bar got all screwy.
Here is what the HTML looks like:
<header>
<div class="row">
<div class="logo">
<img src="img/whitestag.jpg">
</div>
<ul class="main-nav">
<li class "active">Home</li>
<li>About</li>
<li>Services</li>
<li>Story</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div class="hero">
<h1>Professional Full Stack Developer</h1>
<div class="button">
What Can I Do?
Completed Projects
</div>
</div>
</header>
AND here is what the CSS currently says:
.main-nav{
float:right;
list-style:none;
margin-top:55px;
margin-right:30px;
}
.main-nav li{
display: inline-block;
margin-left:30px;
}
.main-nav li a{
color:white;
text-decoration:none;
font-size:90%;
font-width:bold;
}
.main-nav li a:hover{
color:#e67e22;
border-bottom:2px #e67e22;
transition:all 0.5s ease-in;
padding:20px 0;
}
.logo img{
height:70px;
float:right;
margin-top:30px;
border-radius:12px;
}
BUT the end result still looks like this:enter image description here
Any help would be great! Totally new to this.
I've followed a few tutorials and fiddled with it to create a drop down menu come out from the website's logo.
This all works perfectly as I aimed for it to. To add effect I'd like to be able to have the menu items calmly fade in instead of just bam there.
I've tried to follow tutorials but I think I've butchered the CSS list enough that it's hard to put in place.
I need to logo to be the parent link which when hovered over drops down the options and not have it's shape, padding, boarders etc. effected by the li class so I created the sub class to prevent that.
Here's the HTML in question.
<nav>
<ul>
<li><div id="logo"><img src="images/logo.png" width="318" height="85" alt="Logo of Website"/></div>
<ul>
<li class="sub"> Much
</li>
<li class="sub"> Navigation
</li>
<li class="sub"> Very
</li>
<li class="sub"> Links
</li>
<li class="sub"> Wow
</li>
</ul>
</li>
</ul>
</nav>
And my mess of a Stylesheet
li {
list-style:none !important;
}
.sub {
padding:5px;
width:300px;
margin-bottom:1px;
border:rgba(0, 0, 0, 0.2);
height:20px;
vertical-align:central;
}
nav ul {
padding:0;
margin:0;
}
nav ul li {
list-style: none;
float:left;
background-color:rgba(0, 0, 0, 0.5);
}
nav ul li a {
text-decoration:none;
color:white;
font-family:'Merriweather', Baskerville, "Century Schoolbook L", "Times New Roman", serif;
font-weight:300;
color:white;
font-size:0.9em;
}
li a:hover {
font-style:italic;
word-spacing:3px;
height:20px;
}
nav ul li ul {
display:none;
}
nav ul li:hover ul {
z-index:5;
display:list-item !important;
position:absolute;
margin-top:90px;
}
nav ul li:hover ul li {
float:none;
}
And a JSFiddle link which shows you a box which is the logo and when you hover over it the menu appears below it... I'm aiming to get that menu list to fade into existence and not just jump out behind the logo.
JSFiddle
Try CSS3 transitions if you don't want to use jQuery. I think your markup may need some rewriting, but try for example:
transition:All 1s linear;
-webkit-transition:All 1s linear;
-moz-transition:All 1s linear;
-o-transition:All 1s linear;
My final goal is to create what you see in image B. Note: the menu bar must be centered on the page. I did create B by setting the vertical-align on the image to middle. However, as a result of doing this my dropdown menu is slightly separated from the main header. Therefore, i cannot select the sub-menu items when i move my mouse cursor down. Any ideas on making this work ? Thanks Jillian
<style>
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
position:relative;
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
#nav ul{
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align:left;
}
#nav ul li{
display:block;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
text-decoration:underline;
background:#f1f1f1;
}
#nav li:hover ul a{
text-decoration:none;
background:none;
}
#nav li:hover ul a:hover{
text-decoration:underline;
background:#f1f1f1;
}
#nav ul a{
white-space:nowrap;
display:block;
border-bottom:1px solid #ccc;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
background:#f1f1f1;
}
</style>
</head>
<body>
<ul id="nav">
<li>Item one</li>
<li>Item two
<ul>
<li>Sub1</li>
<li>Sub2</li>
</ul>
</li>
<li class="double-line">
<img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></li>
<li>The Fourth</li>
<li>Last</li>
</ul>
</body>
</html>
You do something like,
#nav ul{
background:url('img/logo_large.png') no-repeat center center;
/* more CSS here */
}
unless you have to use it as a link. Then consider position:absolute; for the image with #nav ul being position:relative;, and use a floating layout for the other links with a z-index to overlap where they should hang over.
You can just offset the submenu up to cover the logo height.
Here is a JSfiddle using the google logo and altering the submenu style by adding this:
#nav ul {
top: 20px;
}
Try to insert in CSS line-height: X px; (for example, parent div height) in each menu title (Item one, Item two, The Fourth, etc.)
I'm learning to make a vertical menu using only css (I must say most of this code was copied from google).
When I put mouse over list1, items display in the back, and LargeNameList2 is over items of list1(since "LongNameList2" has a longer name) . So what i need are 1 of 2 things(or both if possible):
-How to "bring to front" list items?, so they display over LargeNameList2.
-How to make the other lists that are below(list 2 and 3) go down when I put mouse over list1?(and list3 when I mouseover list2)?
Code HTML:
<head runat="server">
<title></title>
<style type="text/css">
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
#nav li{
margin-right:10px;
position:relative;
}
#nav a{
/*display:block;*/
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0);/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:5px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}
</style>
</head>
<body>
<ul id="nav">
<li>
List1›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li >
LongNameList2›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<br />
<br />
<li>
List3›
<ul style="margin-left: 25px">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
</ul>
</body>
You should add position:relative and z-index: 101 to your ul to make both of those things happen:
#nav li:hover ul{
left:0;
position: relative;
z-index: 101;
}
Here is a fiddle: http://jsfiddle.net/pj9Gd/
Add z-index to this -
#nav li:hover ul{
left:0;
z-index:1000; // Added this line.
}
z-index is the z coordinate of the item. Positive for nearer and negative for farther from user.