Hello I've been trying to edit foundation 5 top-bar, I copied the entire top-bar code from the foundation.css file and placed it into the _settings.scss no matter what settings i change or edit nothing gets updated on the attached html site.
how can I edit the height of the topbar, change the background color of the entire top-nav bar. Editing the $topbar-height: 45px; doesn't quite work because it also makes the link's height that high as well, which is not what I am trying to do.
.contain-to-grid {
width: 100%;
background: #333333; }
.contain-to-grid .top-bar {
margin-bottom: 0; }
.fixed {
width: 100%;
left: 0;
position: fixed;
top: 0;
z-index: 99; }
.fixed.expanded:not(.top-bar) {
overflow-y: auto;
height: auto;
width: 100%;
max-height: 100%; }
.fixed.expanded:not(.top-bar) .title-area {
position: fixed;
width: 100%;
z-index: 99; }
.fixed.expanded:not(.top-bar) .top-bar-section {
z-index: 98;
margin-top: 45px; }
.top-bar {
overflow: hidden;
height: 45px;
line-height: 45px;
position: relative;
background: #333333;
margin-bottom: 0; }
.top-bar ul {
margin-bottom: 0;
list-style: none; }
.top-bar .row {
max-width: none;
}
.top-bar form,
.top-bar input {
margin-bottom: 0; }
.top-bar input {
height: 1.8rem;
padding-top: .35rem;
padding-bottom: .35rem;
font-size: 0.75rem; }
.top-bar .button, .top-bar button {
padding-top: 0.4125rem;
padding-bottom: 0.4125rem;
margin-bottom: 0;
font-size: 0.75rem; }
#media only screen and (max-width: 40em) {
.top-bar .button, .top-bar button {
position: relative;
top: -1px; } }
.top-bar .title-area {
position: relative;
margin: 0;
padding-left: 0em; //topbar title area
}
.top-bar .name {
height: 45px;
margin: 0;
font-size: 16px; }
.top-bar .name h1 {
line-height: 45px;
font-size: 1.0625rem;
margin: 0; }
.top-bar .name h1 a {
font-weight: normal;
color: white;
width: 75%;
display: block;
padding: 0 15px; }
.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; }
.top-bar .toggle-topbar a {
color: white;
text-transform: uppercase;
font-size: 0.8125rem;
font-weight: bold;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; }
.top-bar .toggle-topbar.menu-icon {
top: 50%;
margin-top: -16px; }
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0 40px 0 15px;
color: white;
position: relative; }
.top-bar .toggle-topbar.menu-icon a span::after {
content: "";
position: absolute;
display: block;
height: 0;
top: 50%;
margin-top: -8px;
right: 15px;
box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
width: 16px; }
.top-bar .toggle-topbar.menu-icon a span:hover:after {
box-shadow: 0 0px 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; }
.top-bar.expanded {
height: auto;
background: transparent; }
.top-bar.expanded .title-area {
background: #333333; }
.top-bar.expanded .toggle-topbar a {
color: #888888; }
.top-bar.expanded .toggle-topbar a span::after {
box-shadow: 0 0px 0 1px #888888, 0 7px 0 1px #888888, 0 14px 0 1px #888888; }
.top-bar-section {
left: 0;
position: relative;
width: auto;
transition: left 300ms ease-out;
}
.top-bar-section ul {
padding: 0;
width: 100%;
height: auto;
display: block;
font-size: 16px;
margin: 0;
}
.top-bar-section .divider,
.top-bar-section [role="separator"] {
border-top: solid 1px #1a1a1a;
clear: both;
height: 1px;
width: 100%; }
.top-bar-section ul li {
background: #333333; }
.top-bar-section ul li > a {
display: block;
width: 100%;
color: white;
padding: 12px 0 12px 0;
padding-left: 15px;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8125rem;
font-weight: normal;
text-transform: none; }
.top-bar-section ul li > a.button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #008cba;
border-color: #007095;
color: white; }
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
background-color: #007095; }
.top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
color: white; }
.top-bar-section ul li > a.button.secondary {
background-color: #e7e7e7;
border-color: #b9b9b9;
color: #333333; }
.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
background-color: #b9b9b9; }
.top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
color: #333333; }
.top-bar-section ul li > a.button.success {
background-color: #43ac6a;
border-color: #368a55;
color: white; }
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
background-color: #368a55; }
.top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
color: white; }
.top-bar-section ul li > a.button.alert {
background-color: #f04124;
border-color: #cf2a0e;
color: white; }
.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
background-color: #cf2a0e; }
.top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
color: white; }
.top-bar-section ul li > a.button.warning {
background-color: #f08a24;
border-color: #cf6e0e;
color: white; }
.top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
background-color: #cf6e0e; }
.top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
color: white; }
.top-bar-section ul li > button {
font-size: 0.8125rem;
padding-right: 15px;
padding-left: 15px;
background-color: #008cba;
border-color: #007095;
color: white; }
.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
background-color: #007095; }
.top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
color: white; }
.top-bar-section ul li > button.secondary {
background-color: #e7e7e7;
border-color: #b9b9b9;
color: #333333; }
.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
background-color: #b9b9b9; }
.top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
color: #333333; }
.top-bar-section ul li > button.success {
background-color: #43ac6a;
border-color: #368a55;
color: white; }
.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
background-color: #368a55; }
.top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
color: white; }
.top-bar-section ul li > button.alert {
background-color: #f04124;
border-color: #cf2a0e;
color: white; }
.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
background-color: #cf2a0e; }
.top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
color: white; }
.top-bar-section ul li > button.warning {
background-color: #f08a24;
border-color: #cf6e0e;
color: white; }
.top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
background-color: #cf6e0e; }
.top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
color: white; }
.top-bar-section ul li:hover:not(.has-form) > a {
background-color: #555555;
background: #272727;
color: white; }
.top-bar-section ul li.active > a {
background: #008cba;
color: white; }
.top-bar-section ul li.active > a:hover {
background: #0078a0;
color: white; }
.top-bar-section .has-form {
padding: 15px; }
.top-bar-section .has-dropdown {
position: relative; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
border-left-style: solid;
margin-right: 15px;
margin-top: -4.5px;
position: absolute;
top: 50%;
right: 0; }
.top-bar-section .has-dropdown.moved {
position: static; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important;
width: 100%; }
.top-bar-section .has-dropdown.moved > a:after {
display: none; }
.top-bar-section .dropdown {
padding: 0;
position: absolute;
left: 100%;
top: 0;
z-index: 99;
display: block;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
.top-bar-section .dropdown li {
width: 100%;
height: auto; }
.top-bar-section .dropdown li a {
font-weight: normal;
padding: 8px 15px; }
.top-bar-section .dropdown li a.parent-link {
font-weight: normal; }
.top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
margin-bottom: 0;
margin-top: 0;
font-size: 1.125rem; }
.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
color: white;
display: block; }
.top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
background: none; }
.top-bar-section .dropdown li.has-form {
padding: 8px 15px; }
.top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
top: auto; }
.top-bar-section .dropdown label {
padding: 8px 15px 2px;
margin-bottom: 0;
text-transform: uppercase;
color: #777777;
font-weight: bold;
font-size: 0.625rem; }
.js-generated {
display: block; }
#media only screen and (min-width: 40.063em) {
.top-bar {
background: #333333;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
.contain-to-grid .top-bar {
max-width: 62.5rem;
margin: 0 auto;
margin-bottom: 0; }
.top-bar-section {
transition: none 0 0;
left: 0 !important; }
.top-bar-section ul {
width: auto;
height: auto !important;
display: inline; }
.top-bar-section ul li {
float: left; }
.top-bar-section ul li .js-generated {
display: none; }
.top-bar-section li.hover > a:not(.button) {
background-color: #555555;
background: #272727;
color: white; }
.top-bar-section li:not(.has-form) a:not(.button) {
padding: 0 15px;
line-height: 45px;
background: #333333; }
.top-bar-section li:not(.has-form) a:not(.button):hover {
background-color: #555555;
background: #272727; }
.top-bar-section li.active:not(.has-form) a:not(.button) {
padding: 0 15px;
line-height: 45px;
color: white;
background: #008cba; }
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
background: #0078a0;
color: white; }
.top-bar-section .has-dropdown > a {
padding-right: 35px !important; }
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
.top-bar-section .has-dropdown.moved {
position: relative; }
.top-bar-section .has-dropdown.moved > .dropdown {
display: block;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.top-bar-section .has-dropdown > a:focus + .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
border: none;
content: "\00bb";
top: 1rem;
margin-top: -1px;
right: 5px;
line-height: 1.2; }
.top-bar-section .dropdown {
left: 0;
top: auto;
background: transparent;
min-width: 100%; }
.top-bar-section .dropdown li a {
color: white;
line-height: 45px;
white-space: nowrap;
padding: 12px 15px;
background: #333333; }
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
color: white;
background: #333333; }
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
color: white;
background-color: #555555;
background: #272727; }
.top-bar-section .dropdown li label {
white-space: nowrap;
background: #333333; }
.top-bar-section .dropdown li .dropdown {
left: 100%;
top: 0; }
.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
border-bottom: none;
border-top: none;
border-right: solid 1px #4e4e4e;
clear: none;
height: 45px;
width: 0; }
.top-bar-section .has-form {
background: #333333;
padding: 0 15px;
height: 45px; }
.top-bar-section .right li .dropdown {
left: auto;
right: 0; }
.top-bar-section .right li .dropdown li .dropdown {
right: 100%; }
.top-bar-section .left li .dropdown {
right: auto;
left: 0; }
.top-bar-section .left li .dropdown li .dropdown {
left: 100%; }
.no-js .top-bar-section ul li:hover > a {
background-color: #555555;
background: #272727;
color: white; }
.no-js .top-bar-section ul li:active > a {
background: #008cba;
color: white; }
.no-js .top-bar-section .has-dropdown:hover > .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; }
.no-js .top-bar-section .has-dropdown > a:focus + .dropdown {
display: block;
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto;
position: absolute !important; } }
you dont need to copy paste the top-bar.scss in _settings.scss -remove it
in _settings.scss you have
$topbar-bg: $topbar-bg-color;
$topbar-height: 45px;
in line 1365 and 1368.. change them to your needs
Related
I need to create a 3 second delay for the following class: .mag-megamenu .dropdown.mag-megamenu-fw .dropdown-menu
I would like to use the solution found here for a similar question: https://stackoverflow.com/a/6943704/3684265
However I'm having an issue finding the correct hover class to apply the visibility and opacity styles to. I have applied visibility, opacity and transition to .mag-megamenu .dropdown.mag-megamenu-fw which works to hide it the drop down, but when I hover over the main navigation items the dropdown doesn't appear.
Full stylesheet is below for reference:
//
// Common
// _____________________________________________
& when (#media-common = true) {
.mag-megamenu .dropdown a, .mag-megamenu .dropdown-menu a {
color: #656565;
}
.mag-megamenu .dropdown-menu > li > a {
padding: 6px 15px;
}
.mag-megamenu .navbar-nav > li .dropdown-menu {
border: 1px solid #d1d1d1;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.19);
}
.mag-megamenu i {
color: #bfbfbf;
}
.mag-megamenu .dropdown:hover > .dropdown-menu {
margin-top: 0;
}
.mag-megamenu .dropdown-menu {
border: 1px solid #efefef;
box-shadow: none;
padding: 0;
}
.mag-megamenu .form-control {
border: 1px solid #efefef;
margin-top: 10px;
}
.mag-megamenu .btn {
margin: 10px 0 20px;
}
.mag-megamenu video {
height: auto;
max-width: 100%;
}
.mag-megamenu iframe, .mag-megamenu embed, .mag-megamenu object {
max-width: 100%;
}
.mag-megamenu .dropdown-menu .withoutdesc {
display: block;
margin-top: 0;
padding: 15px 20px;
text-align: left;
text-transform: none;
width: 100%;
}
.mag-megamenu a:hover {
text-decoration: none;
}
.mag-megamenu .dropdown-menu .withoutdesc ul li {
padding: 3px 10px;
}
.mag-megamenu .dropdown-menu .withoutdesc ul li:hover, .mag-megamenu .dropdown-menu .withoutdesc ul li:focus {
background-color: #f5f5f5 !important;
color: #262626;
text-decoration: none;
}
.mag-megamenu .dropdown-menu .withoutdesc li:last-child {
border-bottom: 0 solid #fff;
}
.mag-megamenu .mag-megamenu-content.withdesc a::after {
color: #cfcfcf;
content: attr(data-description);
display: block;
font-size: 11px;
font-weight: 400;
line-height: 0;
text-transform: uppercase;
}
.mag-megamenu .dropdown-submenu {
position: relative;
}
.mag-megamenu .dropdown-submenu > .dropdown-menu {
left: 100%;
margin-left: -1px;
margin-top: 0;
top: 0;
transition-delay: 2s;
}
.mag-megamenu .dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.mag-megamenu .dropdown-submenu > a::after {
border-color: transparent transparent transparent #cccccc;
border-style: solid;
border-width: 5px 0 5px 5px;
display: block;
float: right;
height: 0;
margin-right: -10px;
margin-top: 5px;
width: 0;
}
.mag-megamenu .dropdown-submenu:hover > a::after {
border-left-color: #ffffff;
}
.mag-megamenu .dropdown-submenu.pull-left {
float: none;
}
.mag-megamenu .dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
.mag-megamenu p {
color: #656565;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
}
.mag-megamenu .nav, .mag-megamenu .collapse, .mag-megamenu .dropup, .mag-megamenu .dropdown {
position: static;
}
.mag-megamenu .half {
left: auto !important;
right: auto !important;
width: 50%;
}
.mag-megamenu .container {
position: relative;
}
.mag-megamenu .dropdown-menu {
left: auto;
}
.mag-megamenu .nav.navbar-right .dropdown-menu {
left: auto;
right: 0;
}
.mag-megamenu .mag-megamenu-content {
padding: 15px 25px;
}
.mag-megamenu .dropdown.mag-megamenu-fw .dropdown-menu {
left: 0 !important;
right: 0;
overflow: auto;
max-height: 500px;
position: absolute;
background-color: #fff;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 3s linear;
}
.mag-megamenu .dropdown.mag-megamenu-fw {
position: initial !important;
}
.mag-megamenu .title {
border-bottom: 1px solid #efefef;
font-size: 13px;
font-weight: bold;
margin-top: 15px;
padding-bottom: 10px;
text-transform: uppercase;
}
.mag-megamenu ul {
list-style: outside none none;
padding-left: 0;
}
.mag-megamenu ul > li {
margin-bottom:0px;
}
.mag-megamenu .navbar-nav > li .dropdown-menu {
display: none;
}
ul.dropdown-menu.fullwidth li.mag-megamenu-content ul {
display: block !important;
}
ul.dropdown-menu.fullwidth li.mag-megamenu-content ul li{
font-weight: 400;
padding-bottom: 10px;
}
.label {
padding: 3px 10px;
font-size: 1.2rem;
font-weight: 300;
border-radius: 2px;
&-info {
border: 1px solid #d9534f;
color: #ffffff;
background-color: #d9534f;
}
&-danger {
border: 1px solid #ffbb20;
color: #ffffff;
background-color: #ffbb20;
}
&-success {
border: 1px solid #5cb85c;
color: #ffffff;
background-color: #5cb85c;
}
}
}
.media-width(#extremum, #break) when (#extremum = 'max') and (#break = #screen__m) {
.mag-megamenu .mag-megamenu-content {
padding: 0px;
}
ul.dropdown-menu.fullwidth li.ui-menu-item.all-category {
display: none !important;
}
}
I am almost done w/ my menu here. However I have two issues.
I can't add a 1px solid border #fff on the last item of the list.
I need to remove the vertical scrollbar on the left.
Here's my CSS:
#nav li ul {
opacity: 0;
height: 0px;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #e74c3c;
color: #fff;
display: block;
list-style: disc;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav .fa { margin: 0px 17px 0px 0px; }
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo{
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
#nav li span:first-child {
margin-left: 32px;
}
asdasdasdasdasdasdasdassa
Well, first remove this:
#nav li:not(:last-child) {
border-bottom: 1px solid #fff;
}
for add border to all li even last one:
#nav li {
border-bottom: 1px solid #fff;
}
for removing scroll do this:
JS:
$('body, html').toggleClass('OverflowHidden');
CSS:
.OverflowHidden {
overflow: auto;
}
and for removing double border use this:
#nav li ul li:last-child {
border-bottom: none!important;
}
jsFiddle
Bought a template, and been working on this for the last couple of days. On my wits end now. I am trying to change the hover over main nav colour and current chosen page colour, to no avail. Please advice?
Code attached.
nav#main-nav {
z-index: 50;
display: block;
}
nav#main-nav ul {
position: relative;
z-index: 49;
margin: 0;
padding: 0;
list-style: none;
}
nav#main-nav ul li {
position: relative;
z-index: 45;
float: left;
margin: 0 0 0 20px;
padding: 0;
}
nav#main-nav > ul > li > a {
display: block;
font-family: Ubuntu;
font-size: 13px;
line-height: 40px;
color: #ffffff;
text-decoration: uppercase;
position: relative;
z-index: 45;
padding: 20px 0;
letter-spacing: 0.1em;
}
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
nav#main-nav > ul > li.current-menu-item,
nav#main-nav > ul > li.current-menu-ancestor {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li .sub-menu {
position: absolute;
top: 80px;
left: 0px;
width: 200px;
padding: 0;
display: none;
z-index: 47;
}
nav#main-nav ul .sub-menu li {
float: none;
border-top: 1px solid;
margin: 0;
}
nav#main-nav ul .sub-menu li:first-child {
border-top: none;
}
nav#main-nav ul .sub-menu li a {
color: #ffffff;
font-size: 12px;
line-height: 20px;
padding: 10px 20px;
display: block;
}
nav#main-nav ul .sub-menu li:hover {
background-color: #ffffff;
}
nav#main-nav ul .sub-menu li:hover a {
color: #ffffff;
}
nav#main-nav ul .sub-menu li.current-menu-item > a {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li ul li .sub-menu {
border-top: none;
position: absolute;
top: 0px;
left: 201px;
}
You have
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
The problem is that the anchor has other styles that override the code above. Then, use
nav#main-nav > ul > li:hover { z-index: 46; }
nav#main-nav > ul > li:hover > a {
color: #ffffff;
}
I'm testing dropdown nav bar with pure css. Text-align doesn't work it only align the dropdown text, left: 50% and right: 50% yes it makes the text center but the navbar won't cover the width of my page. and please don't use overflow: hidden it will make the dropdown not visible
JSFiddle
I want to make the text like this but because of the overflow I can't see the dropdown
Css:
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
background-color: black;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* -- Base drop-down styling -- */
ul.dropdown {
font: normal 16px"Square", Arial, Helvetica, sans-serif;
text-transform: uppercase;
width: 100%;
}
ul.dropdown li {
padding: 7px 0;
background-color: #000;
color: #fff;
line-height: normal;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #fff;
text-decoration: none;
}
ul.dropdown a:hover {
color: #005CE6;
text-decoration: none;
}
ul.dropdown a:active {
color: #fff;
}
/* -- level mark -- */
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 12px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
filter: none;
}
ul.dropdown ul li.hover, ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul a:link, ul.dropdown ul a:visited {
color: #fff;
}
ul.dropdown ul a:hover {
color: #fff;
text-decoration: none;
}
ul.dropdown ul a:active {
color: #fff;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* -- Base style extension -- */
ul.dropdown li a {
display: block;
padding: 7px 14px;
}
/* -- Base style override -- */
ul.dropdown li {
padding: 0;
}
/* -- Base style reinitiate: post-override activities -- */
ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
/* -- Custom -- */
ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px;
/* Especially for IE */
}
ul.dropdown ul a:hover {
background-color: #005CE6;
}
/* -- Drop-down open -- */
ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}
ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}
html {
*overflow-x: hidden;
}
body {
padding: 0;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100%;
width: 100%
overflow: hidden;
}
.container {
padding: 50px;
}
.horizontal-centering {
position: relative;
}
.horizontal-centering > * > * {
float: left;
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.horizontal-centering > * > * > * {
float: left;
position: relative;
}
remove float: left; in your ul.dropdown li. Add text-align: center; in your ul.dropdown and display: inline-block; in your ul.dropdown li
Fiddle Demo
ul.dropdown {
position: relative;
z-index: 597;
background-color: black;
text-align: center;
}
ul.dropdown li {
display: inline-block;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
I want to make my navigation bar stretch the full width of my page, but it doesnt want to stretch everytime I use width 100% the navbar just break and lose its form. I'm not using any javascript and i think the problem is on the .horizontal-centering class CMIW
JSFiddle
I'm using pure css nav bar
/* dropdown.css */
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* default.css */
ul.dropdown {
font: normal 16px"Square", Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
ul.dropdown li {
padding: 7px 0;
background-color: #000;
color: #fff;
line-height: normal;
}
ul.dropdown a:link, ul.dropdown a:visited {
color: #fff;
text-decoration: none;
}
ul.dropdown a:hover {
color: #005CE6;
text-decoration: none;
}
ul.dropdown a:active {
color: #fff;
}
ul.dropdown ul {
width: 170px;
background-color: #333;
color: #fff;
font-size: 12px;
text-transform: none;
filter: alpha(opacity=90);
-moz-opacity: .9;
KhtmlOpacity: .9;
opacity: .9;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
filter: none;
}
ul.dropdown ul li.hover, ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul a:link, ul.dropdown ul a:visited {
color: #fff;
}
ul.dropdown ul a:hover {
color: #fff;
text-decoration: none;
}
ul.dropdown ul a:active {
color: #fff;
}
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* default.advanced.css */
ul.dropdown li a {
display: block;
padding: 7px 14px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
ul.dropdown ul a {
padding: 4px 5px 4px 14px;
width: 151px;
}
ul.dropdown ul a:hover {
background-color: #005CE6;
}
ul.dropdown li:hover > a.dir {
background-color: #2e2e2e;
color: #005CE6;
}
ul.dropdown ul li:hover > a.dir {
background-color: #76b900;
color: #fff;
}
html { *overflow-x: hidden; }
body { padding: 0; }
body, html { height: 100%; padding: 0; margin: 0; }
.wrapper { min-height: 100%; min-width: 950px;overflow: hidden; }
.container { padding: 50px; }
.horizontal-centering { position: relative; }
.horizontal-centering > * > * { float: left; width: auto; position: relative; left: 50%; margin: 0; padding: 0; }
.horizontal-centering > * > * > * { float: left; position: relative; right: 50%; }
Instead of using overflow hidden to clear the floats by using a clearfix helper class this made the second level appear.
/* helper class for clearing floats */
.clearfix:after{
display: block;
visibility: hidden;
clear: both;
height: 0;
content:".";
}
.clearfix {
display: inline-block;
}
.clearfix{
display: block;
}
Reworked the dropdown and centering a little
.horizontal-centering {
background: #000000;
position: relative;
}
.horizontal-centering > div > div {
clear: both;
float: left;
width: 100%;
}
.dropdown-horizontal {
float: left;
width: auto;
position: relative;
left: 50%;
margin: 0;
padding: 0;
}
ul.dropdown > li > ul {
visibility: hidden;
position: absolute;
width: auto;
left: 0;
}
ul.dropdown > li:hover > ul {
visibility: visible;
}
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
float: left;
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
ul.dropdown > li {
float: left;
position: relative;
right: 50%;
line-height: 1.3em;
}
ul.dropdown li.hover, ul.dropdown li:hover {
cursor: default;
}
ul.dropdown ul li {
float: none;
}
http://fiddle.jshell.net/35JPL/26/
http://fiddle.jshell.net/35JPL/26/show/
Check this fiddle based on yours: http://jsfiddle.net/u67qx/
I added width:100% to some classes and I deleted left:50%; and right:50%;. Looks like this is what you want. You can align text to center.