/ / Dostosowywanie górnego paska fundamentu 5 za pomocą sass - html, css, sass, zurb-foundation

dostosowywanie podstawy 5 do górnego paska za pomocą sass - html, css, sass, zurb-foundation

Cześć Próbowałem edytować fundament 5górny pasek, skopiowałem cały kod górnego paska z pliku foundation.css i umieściłem go w _settings.scss bez względu na to, jakie ustawienia zmienię lub edytuję, nic nie zostanie zaktualizowane na załączonej stronie html.

jak mogę edytować wysokość górnego paska, zmienićkolor tła całego górnego paska nawigacji. Edytowanie $ topbar-height: 45px; nie działa, ponieważ powoduje także wzrost wysokości łącza, co nie jest tym, co próbuję wykonać.

   .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: "0bb";
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; } }

Odpowiedzi:

3 dla odpowiedzi № 1

nie musisz kopiować wkleić top-bar.scss w _settings.scss - usuń go

w _settings.scss ty masz

$topbar-bg: $topbar-bg-color;
$topbar-height: 45px;

w linii 1365 i 1368 .. zmień je na swoje potrzeby