My navigation bar doesn't work in Firefox. You can't click on any of the child items. I apologize if I'm putting too much code here, but I really don't know what's causing the issue. I've removed as much of the trivial stuff as I could.
#navbar {
width: 100%;
border-top: 1px solid #879478;
height: 35px;
}
#navigation {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: -10px !important;
}
#nav {
float: left;
width: 1000px;
height: 35px;
list-style: none;
}
#nav a {
text-indent: 0;
display: inline-block;
margin-top: -1px !important;
font-weight: normal;
border: 1px solid transparent;
font-style: normal;
height: 35px;
line-height: 35px;
text-decoration: none;
text-align: center;
}
#nav ul {
position: absolute;
list-style: none;
display: inline-table;
margin-top: 1px !important;
height: 35px;
}
#nav li:hover > ul {
display: block;
}
#nav li {
float: left;
}
#nav ul {
display: none;
}
#nav ul a {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
display: inline-block;
width: inherit;
text-align: center;
display: block;
font-weight: normal;
}
#nav ul {
padding: 0px;
z-index: 100 !important;
}
#nav ul li {
float: none;
}
#nav ul ul {
width: 141px !important;
padding-top: 1px !important;
border-top: 1px solid #6f8059 !important;
position: absolute;
margin-top: -38px !important;
left: 100%;
margin-left: 1px;
z-index: 100 !important;
}
<div id="navbar">
<div id="navigation">
<ul id="nav">
<li><a style="width: 150px !important;">subject 1</a>
<ul>
<li>child 1
</li>
<li>child 2
</li>
</ul>
</li>
</ul>
</div>
</div>
As #Nitin Garg said, #nav ul { display: none; } line is hidding child elements.
However, if you want to show childs element on parent li hover, you have to add this line :
#nav li:hover ul {display: block; }
Related
How can i make custom pills for navbar like on
screenshot?
I did it by myself, but pills are inside of navbar and the text is not in the center of pill.
I understand, that the problem is inside of .menu li a:hover:not and .menu li a:hover:not(.active). But i don't know, how to make outside of navbar(i mean borders of the pills like on screenshot)
.menu {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
margin: 0 auto;
padding: 0px;
overflow: hidden;
display: block;
list-style:none;
border-radius: 20px 0 0 0;
background-color: #0b78ad;
text-align: center;
}
.menu li {
list-style-type: none;
text-align: center;
display: inline-block;
}
.menu ul li a {
padding: 10px;
padding-left: 50px;
margin: 0px;
display: block;
text-align: center;
}
.menu li a:hover:not(.active) {
color: #325491;
}
.menu li.active a {
border-radius: 20px 0 20px 0;
border-style: solid;
border-width: 2px;
border-color: #325491;
color: #325491;
background-color: white;
}
<div class="menu">
<ul>
<li class="active">startseite</li>
<li>über uns</li>
<li>zell-linien</li>
<li>downloads</li>
<li>kontakt</li>
</ul>
</div>
.menu {
font-family: Arial, sans-serif;
}
.menu ul {
padding: 0;
list-style: none;
background-color: #0b78ad;
text-align: center;
white-space: nowrap;
height: 34px;
margin: 30px 0;
}
.menu li {
position: relative;
top: -10px;
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
position: relative;
display: block;
padding: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
line-height: 1;
transition: all .1s ease-in-out;
}
.menu ul li a.active,
.menu ul li a:hover {
background-color: #FFF;
border: 2px solid #0b78ad;
color: #0b78ad;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skill</li>
<li>Contact</li>
</ul>
</div>
You can do it with just a plain border-radius, like any other property it starts with top, right, bottom and right
.button {
display: inline-block;
background-color: #ededed;
border: 1px solid deepskyblue;
border-radius: 10px 0 10px 0;
padding: 10px 16px;
text-align: center;
}
<div class="button">shape</div>
You can do like this.
1. Navbar you can give a 'max-height' property so that we can set a height for the first-child.
#nav-id {
max-height: 65px;
margin-top: 20px;
}
2.We can set the first 'li' 'margin-top' or 'position'
li:first-child {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 106px;
background: blue;
background-position: center;
margin-top:-20px;
z-index:1;
text-align:center;
}
Here is the working copy:
https://codepen.io/nabanitadasgupta/pen/aLNGgo
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
I have a horizontal menubar, and having an issue with the sub-menus. I want the sub-menus to have the same width with their headers(top li?).
Fiddle
I know one way to solve the problem, by giving fixed width to top li elements, but I don't want that. I want each category to have its own width. Is there an alternative way to fix this?
<div id="header">
<div class="container">
<div class="menu-container">
<ul id="menu">
<li>Home</li>
<li>aaaaaaaaaa
<ul>
<li>blabla</li>
<li>bla bla</li>
<li>blabla bla</li>
</ul>
</li>
<li>bbbbbbbbbb
<ul>
<li>blabla</li>
<li>bla bla blabla</li>
</ul>
</li>
<li>cccccccc
<ul>
<li>bla</li>
</ul>
</li>
<li>ddddd</li>
</ul>
</div>
</div>
</div>
<div id="content" class="wrapper"></div>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
}
body {
background: rgb(36,36,36);
font: normal 100% Arial, Verdana, sans-serif;
}
#header {
background: rgb(16,16,16);
border-top: 3px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
z-index: 100;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
.menu-container {
display: table;
margin: 0 auto;
}
#header ul {
padding: 0;
margin: 0;
list-style: none;
background: rgb(16,16,16);
}
#header ul li {
height: auto;
text-align: center;
width: 130px;
}
#menu {
overflow: auto;
z-index: 100;
width: 665px;
margin: 0 auto;
}
#menu a {
display: block;
padding: 20px;
font-size: 18px;
text-align: center;
font-family: sans-serif;
text-transform: uppercase;
text-decoration: none;
color: WhiteSmoke;
border-right: 1px solid #1d1d1d;
}
#menu a:hover {
color: white;
background: rgb(50,50,50);
}
#menu > li {
float: left;
}
#menu > li.active {
background: rgb(50,50,50);
}
#menu li:nth-child(1) {
border-left: 1px solid rgb(32,32,32);
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
display: none;
z-index: 100;
width: auto;
position: absolute;
}
#menu li ul a {
padding: 10px 0;
}
#menu li ul li {
border-left: 1px solid rgb(32,32,32);
border-bottom: 1px solid rgb(32,32,32);
font-size: .8em;
}
#menu li ul li:nth-child(1) {
border-top: 1px solid rgb(32,32,32);
}
.wrapper {
width: 100%;
min-height: 500px;
overflow: auto;
background: rgb(36,36,36);
border-top: 1px solid rgb(55,55,55);
}
I applied these styles on top of your styles and they seem to have done what you want. (non-fixed width top menu where second layer scales to width of thing above it).
.menu-container { }
.menu-container #menu { width: auto; overflow: visible; height: 60px; }
.menu-container #menu li { position: relative; display: block; width: auto; }
.menu-container #menu li ul { display: none; width: 100%; }
.menu-container #menu li:hover ul { display: block; }
.menu-container #menu li ul li { display: block; width: 100%; }
Here's the fiddle with modified code: http://jsfiddle.net/3zj6E/1/.
The following CSS rule sets were changed:
#menu {
overflow: auto;
z-index: 100;
display: table;
margin: 0 auto;
}
#menu > li {
float: left;
position: relative;
}
#menu li ul {
display: none;
z-index: 100;
position: absolute;
width: 100%;
}
In my set up I have my navigation bar set horizontally and contained within my header div like this:
<div id="header-section">
<div id="main-menu-wrapper">
<ul id="main-menu">
<li>Home</li>
<li>Services
<ul id="sub-men">
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
My problem is that the sub-menu is not showing because the height on "main-menu-wrapper" is set to auto. The sub-menu is showing when I set a height like 100px. When I set the position on the sub-menu to static instead of absolute, it expands the entire main-menu-wrapper. How can I get the sub-menu to show properly?
Here's the CSS portion for my whole header section:
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
background: #740600;
}
#main-menu-wrapper {
position: relative;
width: 74%;
min-width: 600px;
height: auto;
margin: 0% auto;
}
#main-menu {
list-style: none;
font-weight: bold;
line-height: 150%;
}
#main-menu li {
position: relative;
float: right;
margin: 0px 5px;
}
#main-menu a {
padding: 3px;
color: #ffffff;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu a:hover {
padding: 3px;
color: #740600;
background: #ffffff;
text-decoration: none;
}
#main-menu li ul {
position: absolute;
display: none;
}
#main-menu li ul li{
float: none;
}
#main-menu li:hover ul {
display: block;
}
#main-menu li ul a {
padding: 3px;
color: #ccc;
background: #740600;
text-decoration: none;
border-radius: 5px;
}
#main-menu li ul a:hover {
padding: 3px;
color: #740600;
background: #ccc;
text-decoration: none;
}
#banner-wrapper {
position: relative;
padding: 5px 0 5px;
}
#banner {
position: relative;
max-width: 75%;
min-width: 600px;
margin: 0% auto;
background: #ffffff;
}
#logo {
max-width: 600px;
height: auto;
}
I'm a little confused by what you're asking here, but I created a fiddle where your menu shows.
I deleted the styles for #main-menu-wrapper and I removed the background color on #header-section.
Hopefully this can be a decent starting point for you: http://jsfiddle.net/44vRN/
#header-section {
position: relative;
width: 100%;
padding: 5px 0px;
}
You could try to use absolute positioning on the submenu to remove it from the document flow.
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)