I'm trying to make my website fully responsive, and I'm stumbling upon the navigation bar; I cannot seem to make it responsive. My coding is as following:
<div class = "navbar" >
<nav>
<ul>
<li>Collectie
<ul>
<li>Zomercollectie</li>
<li>Wintercollectie</li>
<li>Kerstcollectie</li>
</ul>
</li>
<li>Over ons</li>
<li>Contact</li>
</ul>
</nav>
</div>
And the CSS as following:
.navbar
{
height: 50px;
width: 920px;
max-width:100%;
background-color:#2d2d2d;
margin-left:auto;
margin-right:auto;
}
/* NAVBAR CSS */
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul {
background:#2d2d2d;
color:ffffff;
font-size:30px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-top: 0;
}
nav ul:after
{
content: "";
clear: both;
display: block;
}
nav ul li
{
float: left;
}
nav ul li:hover
{
background: #4b545f;
}
nav ul li:hover a
{
color: #fff;
}
nav ul li a {
display: block;
padding: 7px 93px;
color: #757575;
text-decoration: none;
}
nav ul ul
{
background: #5f6975;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li
{
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover
{
background: #4b545f;
}
/* END of NAVBAR CSS */
I would like to make it scale the whole thing, including fonts when they are too big, and without the buttons stacking vertically.
Any idea?
Allright, i've fixed it. It was in the height element. I shouldn't have used them at all.
Related
I'm having issues centering the Navigation bar of my Drop Down menu (See Code Below). To specify what I mean I'll leave an image here aswell.
As you can see the middle and bottom Navigation bars aren't centered, and when I attempt to center them, they stack on top of each other in the middle of the screen instead of just centering the line. All of the HTML for the Navigation bar is the same, so I've left the first section for it in the code. Any help is appreciated.
/*CSS*/
#menu {
z-index: 1;
clear: both;
margin: 0;
padding: 0 40px 0 0;
font: bold 15px/26px Avenir;
height: 2em;
}
#menu ul {
float: left;
list-style: none;
margin:0;
padding: 0;
}
#menu li {
display: inline;
list-style: none;
position: relative;
float: left;
}
#menu li a {
display: block;
float: left;
padding: 0 0.5em;
text-decoration: none;
color: #000;
}
#menu li.current_page_item a {
background-color: #FFF;
color: #333;
}
#menu li.current_page_item ul li a {
background-color: transparent;
color: #333;
width: 9em;
}
#menu li:hover {
background: #ECECEC;
}
#menu li a:hover {
color: #333;
}
#menu>ul a {
width: auto;
}
#menu ul ul {
position: absolute;
display: none;
}
#menu ul ul li {
border-bottom: 1px solid #CCC;
width: 9em;
}
#menu ul li:hover ul {
display:block;
background-color: #AAA;
width: 9em;
}
#menu ul ul li:hover ul {
display:block;
background-color: #555;
}
#menu ul ul {
top: 2em; left: 0em;
}
#menu ul ul ul {
top: 0em; left: 9em;
border-top: 0.1em solid #CCC;
}
/*HTML*/
<div id="menu">
<ul>
<li>Alternative & Natural Building <ul>
<li>Earthbag</li>
<li>Strawbale</li>
<li>Tiny Houses</li>
<li>Underground Houses</li>
<li>Yurts</li>
</ul></li>
I am writing a simple drop down menu code in HTML. I am not able to create dropdown. I am using google chrome. Every thing seems to be displaying fine only the drop down related to Home3 which is home3.1 is not showing up. Please help!
<html>
<head>
<title>Welcome to I</title>
<link rel="stylesheet" href="n.css">
</head>
<body>
<div id ="nav">
<div id = "nav_wrapper">
<ul>
<li>Home</li><li>
Home1</li><li>
Home2</li><li>
Home3
<ul>
<li>Home3.1</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
////////////////////////////////////////////
css file
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li: hover ul{
display: block;
}
#nav ul ul{
display: none;
position : absolute;
}
Try below CSS
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul ul{
display: none;
position : absolute;
}
#nav ul ul li a{
background: #333;
color: #fff;
}
#nav ul li:hover ul{
display: block;
}
JSFIDDLE DEMO
MUTLI-LEVEL MENU
MULTI-LEVEL MENU WITH HOVER EFFECT
You need to add position: relative to #nav ul li and set the child ul 100% from the top, then give it a background-color in this case the same as the nav.
Then give the child ul an absolute position
body {
margin: 0;
padding: 0;
background: #ccc;
}
#nav
{
background-color: #222;
}
#nav_wrapper
{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li
{
display: inline-block;
position: relative; /*add this*/
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited
{
color: #ccc;
display: block;
padding : 15px;
text-decoration: none;
}
#nav ui li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover >ul{
display: block;
background: #222;
}
#nav ul ul{
display: none;
position : absolute;
top: 100%;
left: 0
}
<html>
<head>
<title>Welcome to I</title>
<link rel="stylesheet" href="C:\Users\lenovo\Desktop\Spring Semester\IP\Lab02\test\n.css">
</head>
<body>
<div id ="nav">
<div id = "nav_wrapper">
<ul>
<li>Home</li><li>
Home1</li><li>
Home2</li><li>
Home3
<ul>
<li>Home3.1</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I have a 100% wide DIV that contains a centered navigation menu and nothing else. The navigation menu is created using html lists and has some drop-down elements in it.
When you hover over a link in the navigation menu, the background color of that link changes, so naturally I don't want any visible top/bottom margins between the navigation menu and the DIV container - however, the menu is adding a 5px bottom margin which makes the design less attractive.
Here's what I'm having trouble with. I'm trying to use a responsive-design so the page can easily adapt between different browser resolutions, so I cannot specify an exact height for the DIV/nav bar. I need the DIV/nav bar's height to automatically adjust so it can contain the navigation elements for screens with smaller resolutions.
I can get the margin removed without the drop down menu, and I can get it to work without having the navigation centered, but I cannot get the margin removed while keeping the drop down menu and having it centered. Any help would be greatly appreciated.
JSFiddle http://jsfiddle.net/XJRHy/
HTML code:
<div class="navigation">
<nav>
<ul>
<li>One</li>
<li>Two
<ul>
<li>White</li>
<li>Red</li>
<li>Blue</li>
</ul>
</li>
<li>Four</li>
<li>Five</li>
</ul>
</nav>
</div>
CSS
.navigation {
width: 100%;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:#c0c0c0;
font-family: 'Open Sans', sans-serif;
}
nav {
text-align: center;
width:100%;
text-transform: uppercase;
font-size:1.375em;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding:0;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float:left;
}
nav ul li:hover {
background: #4289a9;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 20px 10px 20px;
color: #000000; text-decoration: none;
font-weight:bold;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
z-index:5000;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
z-index:5000;
}
nav ul ul li a {
padding: 10px 20px 10px 20px;
color: #fff;
z-index:5000;
}
nav ul ul li a:hover {
background: #4b545f;
z-index:5000;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
z-index:5000;
}
You can fix it as follows:
nav ul {
border: 1px solid blue; /* for demo only */
list-style: none;
position: relative;
display: inline-table;
margin:0;
padding:0;
vertical-align: top;
}
nav ul is an inline element with some white space below the base line.
Use vertical-align: top to remove it.
See Demo Fiddle
I have dropdown menu (css only)
JSFIDDLE:
>>> jsfiddle <<<
HTML:
<div class="menu">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML
<ul>
<li>HTML 4 and less
<ul>
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
</ul>
</li>
<li>HTML 5</li>
</ul>
</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
CSS:
.menu {
margin: 100px auto;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
white-space:nowrap;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: blue;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu ul ul {
background: green;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: red;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
As you see at last submenu, they are not as upper menus. They wrap text and shrink (minimal width).
Q:
How to make them equal (same width as parent) and no text wrap ?
How to simplify this menu (parent, children, ul > li etc.) so I don't need to make new style for each new sub-menu
Thank you in advance.
Try this - this works great on Chrome:
* { white-space: nowrap; box-sizing: border-box; }
.menu {
margin: 100px auto;
text-align: center;
}
/* ULs */
.menu ul {
padding: 0;
position: absolute;
display: none;
background: green;
top: 0;
position: absolute;
list-style: none;
}
.menu > ul {
background: #efefef;
position: relative;
display: inline-table;
}
.menu > ul > li > ul {
top: 100%;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
left: 100%;
border-left: 1px solid white;
top: -1px;
}
/*LIs*/
.menu li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid yellow;
position: relative;
}
.menu > ul > li {
float: left !important;
border: none;
}
.menu ul li:hover {
background: blue;
}
/* As */
.menu a {
display: block;
padding: 10px;
color: #757575;
text-decoration: none;
}
.menu li:hover a {
color: #fff;
}
.menu ul ul a:hover {
background: red;
}
Also, consider this isn't a good practice (User-experience-wise) to have so many sub menus. You should attempt to re-design your UI to match the usage of your website in a way that won't make the user frustrated.
Vertical submenu postion is correct but links are on top of each other. And it won't hide when hovering in main menu. Hides when hovering outside menu. I don't know what to add/change in css.
Vertical submenu
nav {
padding-top: 183px;
margin-left: auto;
margin-right: auto;
}
ul {
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
font-weight: bold;
font-size: 20px;
margin: 5px;
width: 200px;
}
nav ul ul {
display: none;
margin: 0px;
padding: 0px;
}
nav ul li {
float: left;
}
nav ul a {
display: block;
width: 145px;
text-align: center;
text-decoration: none;
color: #fff;
border: 1px solid #004c99;
border-radius: 8px;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
padding-right: 9px;
padding-bottom: 5px;
padding-left: 9px;
}
nav ul a:active {
background: rgba(255,255,255,0.4);
color: #FFF;
}
nav ul li a:hover, ul a:focus {
text-decoration: none;
background-color: #6699cc;
color: #FFFFFF;
}
nav ul a:link, nav ul a:visited {
background: rgba(255,255,255,0.2);
color: #FFFFFF;
}
nav ul li a {
display: block;
margin-top: 0px;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #fff;
margin-top: -35px;
position: relative;
margin-left: 165px;
}
nav ul ul li a:hover {
background: #6699cc;
}
nav ul ul li a:active, ul ul li a:link , ul ul li a:visited{
background-color: #3370AD;
}
nav ul li:hover {
margin-top: 0px;
}
nav ul li:hover > ul{
display: block;
position: absolute;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
Thanks in advance!
change your nav ul li a {
display: block;
margin-top: 0px;} to ... margin-top:5px and see if that does the job. that will fix the spacing issue anyway
This happened to me when I nested the submenu incorrectly:
<ul id="main menu">
<li>
<a>Menu item</a>
<!-- DO NOT CLOSE THIS LI TAG YET! -->
<ul>
<li>Submenu item</li>
</ul>
</li> <!-- NOW YOU CAN CLOSE IT -->
</ul>