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.
Related
I'm trying to do a nav bar with a contact button stuck to the right of the page. I want contact to be aligned with the rest of the elements of the nav bar, however when I add float: right; it just disaligns my nav bar and it doesn't move contact to the right.
Here you can see my code: http://jsfiddle.net/LG2vR/19/
Can someone please tell me the proper way to accomplish this please?
Thanks!
Am not sure if this is what you need exactly, see the updated fiddle
http://jsfiddle.net/ov74xcyg/1/
Basically, i have used position absolute to move your last child of the navigation to the right side and increased width of the navigation till the end of the header.
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
z-index: 500;
box-sizing: content-box;
transition: .3s;
background: red;
}
nav.white {
background: white;
height: 35px;
padding: 10px 100px;
transition: .5s;
}
nav ul {
list-style: none;
float: left;
margin: 0;
padding: 0;
display: flex;
width: 90%;
position: relative;
}
nav ul li {
list-style: none;
}
nav ul li:last-child {
display: inline-block;
right: 5%;
position: absolute;
top: 0;
}
nav ul li a {
line-height: 80px;
color: #FFFFFF;
margin: 12px 30px;
text-decoration: none;
text-transform: capitalize;
transition: .5s;
padding: 10px 5px;
font-size: 16px;
}
nav ul li a:hover {
background-color: rgba(255,255,255,0.2);
}
nav.white ul li a {
color: #000;
line-height: 40px;
transition: .5s;
}
nav ul li a:focus {
outline: none;
}
<div class="wrapper">
<nav>
<ul>
<li>LOGO</li>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</nav>
Just add:
nav ul li a {
float: left;
}
right before:
nav ul li a.contact {
float: right;
}
or use flexbox!
.wrapper li {list-style-type: none;}
.wrapper {
overflow: hidden;
background-color: red;
}
.wrapper .logo{
margin-right : 30px;
}
.wrapper a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.wrapper a:hover {
background-color: #ddd;
color: black;
}
.wrapper a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
<div class="wrapper">
<a class="active logo" href="#">Logo</a>
Home
Page 1
Page 2
<div class="topnav-right">
<li><a class="contact" href="#">Contact</a></li>
</div>
</div>
I am trying to add a border-top with 2px on my fixed navbar however on the a href hover it pushes all of the nav items down by 2px, I am trying to make it so it's static, any help is appreciated.
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
overflow: hidden;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
}
.menu-items { display: inline-block; }
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
It's because of no border. Either give a transparent border with the same width or use the colour of the border. But in your case, it's screwed up. So I changed the overflow: hidden and used margin-top: -2px:
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
margin-top: -2px;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
That's all because of box-sizing property. by default it adds value of paddings/margins/borders outside of content area, so element becomes bigger. Just define globally * {box-sizing: border-box;} it will make elements to fixed sizes. That means if element had no border, and then it adds, the element's area for content will be smaller, but the whole size will be the same. However, I strongly recommend you to use border at the beginning, otherwise, it will jump inside the element. You can set the color 'transparent' and it won't be visible. Then just by changing border-color it will be nicer.
I have created a little fiddler:
https://jsfiddle.net/marco_rensch/0hva2241/
this could be a possible solution
checkout CSS Code Changes between row 31 and 51
the key is to add a default border 2px transparent to the li's and change it by hover:
.menu-items li:hover{border-top: 2px solid #72BCD4;}
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; }
I'm using a fairly typical nested UL setup to create a dropdown menu, however I can't get the anchorlinks inside the li to expand to their height.
The HTML
<div id="navbar-container">
<ul id="navbar">
<li>Home</li>
<li>Lessons</li>
<ul>
<li>sub item1sdfsdfsdfsdfsdf</li>
<li>sub item2</li>
<li>sub item3</li>
</ul>
</li>
<li>Custom Fitting</li>
</ul>
</div>
In the CSS I'm using display:block on the anchor tags which does make them expand to the width of the li but not the height. I have tried using padding but it does not work correctly across all browsers. #navbar is using display: table and the children lis are using display: table-cell. This is so the navbar can expand and contract to fit the screen size. I suspect display: table-cell may have something to do with the anchors not expand vertically.
Here is a JSFiddle so you can see what I'm talking about.
The CSS
#navbar-container {
min-width: 768px;
height: 32px;
position: relative;
background-color: #bb4212;
}
#navbar {
list-style-type: none;
display: table;
width: 100%;
font : 14px"Arial", sans-serif;
height: 100%;
}
#navbar li {
text-transform:uppercase;
display: table-cell;
text-align: center;
}
#navbar li a {
color: #f2f2f2;
display: block;
border-left: 1px solid #c17455;
}
#navbar > li:first-child a {
border: 0;
}
#navbar li ul {
list-style-type: none;
background-color: #f2f2f2;
position: absolute;
right: -9999px;
top: 32px;
margin-left: 1px;
-moz-box-shadow: 0px 6px 4px 0px #898989;
-webkit-box-shadow: 0px 6px 4px 0px #898989;
box-shadow: 0px 6px 4px 0px #898989;
}
#navbar li ul li:hover {
background-color: #bb4212;
}
#navbar li ul a:hover {
color: #f2f2f2;
}
#navbar li:hover {
background-color: #f2f2f2;
}
#navbar li:hover a {
color: #000;
}
#navbar li:hover ul {
right: auto;
}
#navbar li ul li {
display: block;
text-align: left;
}
#navbar li ul li a {
border: 0;
white-space:nowrap;
margin: 0 5px;
text-decoration: none;
display: block;
}
My favorite technique for filling up a parent container 100% width and height is to use absolute positioning:
parent {
position: relative; /* unless it's already positioned */
}
child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
Here it is applied to your JSFiddle: http://jsfiddle.net/Kgz5p/
Is it possible to keep a submenu open, even after it has been clicked?
For example, when you click Information, a sub menu appears as well as loading a new page. But is it possible to keep the sub menu open, even after the new page has loaded? I want the sub menu information to be available at all times, but only appear when clicked.
Here is the html -
<div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">
information
<ul>
<li> Hello, and welcome to this site</li>
</ul>
</li>
And here is the css -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0;
padding-top: 0;
text-align: center;
width: 332px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
list-style:none;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
overflow: hidden;
margin: 0;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
All help is greatly appreciated!
You can use an iframe below your nav bar (obviously you need to adjust the width, height and..), and change the src of iframe on clicking the menu item, this will satisfy your need.