Hi together,
can anybody tell me, how i can convert the footer Menu from vertical to horizontal?
Shop is: https://backerei-going.myshopify.com/
PW is: vohsho
Many Thanks
Please place this code at the end of theme.scss
.links-footer ul li {
display: inline-block;
padding: 0px 12px;
}
Hi @pioneer100 many Thanks for your fast reply.
I added it, but I can’t see any difference.
BR Florian
It seems that you did not place the code at right place.
Please go to Online Store ->Theme ->edit code → assets ->theme.scss.liquid and place code at the end of that file
I only have a theme.css and i added it on the end of the file, as you can see on the screenshot.
Please place the code at the very end of the file. It is in the .search-bar-input–group CSS.
@pioneer100 thx for your reply.
i changed it like this, but I still can’t see any changes.
Here you can see the complete footer part from the css code. Eventually this helps.
/*============================================================================
#Footer
==============================================================================*/
footer {
background-color: var(--color-footer-bg);
padding: 30px 0;
color: var(--color-footer-text); }
footer a:active, footer a:hover {
color: var(--color-footer-text); }
footer .wetheme-dropdown button {
color: var(--color-footer-text);
border: 1px solid var(--color-footer-text); }
footer .wetheme-dropdown ul {
background-color: var(--color-footer-bg);
border: 1px solid var(--color-footer-text);
color: var(--color-footer-text); }
footer .wetheme-dropdown ul li:hover,
footer .wetheme-dropdown ul li.selected {
background-color: var(--color-footer-bg-darken5); }
.footer-header {
color: var(--color-footer-text);
font-size: var(--base-font-size);
margin-bottom: 15px;
font-family: var(--body-font-stack);
font-weight: bold; }
@media only screen and (max-width: 480px) {
.footer-header {
padding-top: 30px;
border-top: 1px solid var(--color-footer-border); } }
.footer-alignment--center {
text-align: center; }
@media only screen and (max-width: 767px) {
#shopify-section-footer .grid .grid__item:first-child, #shopify-section-footer .grid--rev .grid__item:first-child, #shopify-section-footer .grid--full .grid__item:first-child {
margin-top: 0; }
#shopify-section-footer .grid .grid__item:first-child .footer-header, #shopify-section-footer .grid--rev .grid__item:first-child .footer-header, #shopify-section-footer .grid--full .grid__item:first-child .footer-header {
padding-top: 20px;
border-top: 0; } }
@media only screen and (max-width: 480px) {
footer .grid__item {
margin-top: 30px; } }
.template-index #shopify-section-footer {
margin-top: 0; }
.image-bar--title {
text-align: center;
padding-top: 10px;
font-size: var(--header-text-size-px);
width: 100%;
text-align: center;
display: inline-block;
position: relative;
margin-bottom: -30px;
letter-spacing: var(--heading-spacing);
text-transform: var(--heading-font-case); }
.image-footer svg {
height: 200px; }
.links-footer a {
margin: 0.2em 0; }
.links-footer .footer--level-2 {
padding-left: 10px;
font-size: 95%; }
.links-footer ul {
margin: 0;
padding: 0; }
.links-footer ul li {
list-style-type: none; }
.footer--has-dropdown-title {
margin-bottom: 0.25em;
display: inline-block; }
input.footerinput::-webkit-input-placeholder {
/* stylelint-disable-line selector-no-vendor-prefix */
color: var(--color-footer-text); }
.footer-alignment--center .newsletter-footer form {
display: inline-block; }
.newsletter-footer input.footer-email-input,
.footer-email-input {
border: 0;
border-bottom: 1px solid var(--color-footer-text);
padding-left: 0;
background: var(--color-footer-bg);
color: var(--color-footer-text); }
@media only screen and (max-width: 480px) {
footer .grid__item {
margin-top: 30px; }
footer #contact_form .input-group {
width: 100%; } }
.footer-article,
.footer-content a,
.footer-article a {
color: var(--color-footer-text-darken10); }
@media only screen and (max-width: 480px) {
.footer-article p {
margin-bottom: 0; } }
.social-media-footer ul {
margin: 0;
padding: 0; }
.social-media-footer ul li {
list-style-type: none;
display: inline-block;
margin: 0 15px 10px 0; }
.social-media-footer ul li:last-child {
margin-right: 0; }
.social-media-footer ul li svg {
fill: var(--color-footer-text);
transition: all 0.15s ease-in-out 0s;
width: 20px;
height: 24px;
margin-bottom: -2px; }
.social-media-footer ul li a {
color: var(--color-footer-text);
transition: all 0.15s ease-in-out 0s; }
.social-media-footer ul li a:hover {
color: var(--color-footer-text); }
.footer-description {
padding-bottom: 20px; }
.bottom--footer {
margin-top: 60px; }
.bottom--footer a {
font-size: 12px; }
.bottom--footer---links {
padding: 0;
margin: 10px 0;
flex: 1 1 100%; }
.bottom--footer---links li {
list-style-type: none;
display: inline-block;
padding: 0 15px;
border-left: 1px solid var(--color-footer-text);
line-height: 1; }
.bottom--footer---links li:first-child {
padding-left: 0;
border-left: 0; }
@media only screen and (max-width: 768px) {
.bottom--footer {
text-align: center; }
.payment-icons {
text-align: center; } }
.site-footer .localization-selector:nth-child(2n) {
margin: 0 0 0 15px; }
.site-footer .localization-selector:first-of-type {
margin-left: 0; }
.site-footer .payment-icons-enabled .localization-selector {
margin-bottom: 15px; }
.bottom--footer .localization-selector-form {
justify-content: center;
margin-bottom: 15px; }
@media only screen and (min-width: 768px) {
.footer-alignment--left .bottom--footer-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.footer-alignment--left .bottom--footer-row .bottom--footer---links {
flex: 1 1 auto; }
.footer-alignment--left .bottom--footer-row .payment-icons {
order: 2;
flex: 1 0 60%;
text-align: right; }
.footer-alignment--left .bottom--footer-row .localization-selector-form {
width: 100%;
justify-content: flex-start;
margin-bottom: 0; }
.footer-alignment--left .bottom--footer-no--no-payments .localization-selector-form {
width: auto;
order: 1; }
.footer-alignment--left .bottom--footer-no--no-payments .bottom--footer---links {
flex-grow: 0; } }
form {
margin-bottom: 0; }
.form-vertical {
margin-bottom: 15px; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
@media screen and (max-width: 767px) {
input,
textarea {
font-size: 16px; } }
input,
textarea,
button,
select {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
padding: 0;
margin: 0; }
input[type="image"] {
padding-left: 0;
padding-right: 0; }
button,
input[type="submit"] {
cursor: pointer; }
input {
border: 0;
border-bottom: 1px solid var(--border-color);
padding: 10px 10px 10px 0; }
textarea,
select {
border: 1px solid var(--border-color);
padding: 10px 10px; }
input,
textarea,
select {
background: transparent;
max-width: 100%;
border-radius: 0; }
input:focus,
textarea:focus,
select:focus {
border: 1px solid var(--border-color-darken10); }
input[disabled], input.disabled,
textarea[disabled],
textarea.disabled,
select[disabled],
select.disabled {
cursor: default;
background-color: #f6f6f6;
border-color: #b6b6b6; }
input.input-full,
textarea.input-full,
select.input-full {
width: 100%; }
input::placeholder,
textarea::placeholder,
select::placeholder {
color: var(--text-color-transparent8); }
textarea {
min-height: 100px; }
input[type="checkbox"],
input[type="radio"] {
display: inline;
margin: 0 8px 0 0;
padding: 0;
width: auto; }
input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox; }
input[type="radio"] {
-webkit-appearance: radio;
-moz-appearance: radio; }
input[type="image"] {
padding-left: 0;
padding-right: 0; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 28px;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer; }
optgroup {
font-weight: bold; }
.hidden-label {
position: absolute;
height: 0;
width: 0;
margin-bottom: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
.ie9 .hidden-label,
.lt-ie9 .hidden-label {
position: static;
height: auto;
width: auto;
margin-bottom: 2px;
overflow: visible;
clip: initial; }
label[for] {
cursor: pointer; }
.form-vertical input,
.form-vertical select,
.form-vertical textarea {
display: block;
margin-bottom: 10px; }
.form-vertical input[type="radio"],
.form-vertical input[type="checkbox"] {
display: inline-block; }
input.error,
select.error,
textarea.error {
border-color: #d02e2e;
background-color: #fff6f6;
color: #d02e2e; }
label.error {
color: #d02e2e; }
.qty-error {
margin-top: 10px; }
.input-group {
position: relative;
display: table;
border-collapse: separate; }
.input-group .input-group-field:first-child,
.input-group .input-group-btn:first-child,
.input-group .input-group-btn:first-child > .btn,
.input-group input[type="hidden"]:first-child + .input-group-field,
.input-group input[type="hidden"]:first-child + .input-group-btn > .btn {
border-radius: 0 0 0 0; }
.input-group .input-group-field:last-child,
.input-group .input-group-btn:last-child > .btn {
border-radius: 0 0 0 0; }
.input-group input::-moz-focus-inner {
border: 0;
padding: 0;
margin-top: -1px;
margin-bottom: -1px; }
.input-group-field,
.input-group-btn {
display: table-cell;
vertical-align: middle;
margin: 0; }
.input-group .input-group-field {
width: 100%; }
.input-group-btn {
position: relative;
white-space: nowrap;
width: 1%;
padding: 0; }
.note,
.errors {
border-radius: 0;
padding: 6px 12px;
margin-bottom: 15px;
border: 1px solid transparent;
font-size: 0.9em;
text-align: left; }
.note ul,
.note ol,
.errors ul,
.errors ol {
margin-top: 0;
margin-bottom: 0; }
.note li:last-child,
.errors li:last-child {
margin-bottom: 0; }
.note p,
.errors p {
margin-bottom: 0; }
.note {
border-color: var(--border-color); }
.errors ul {
list-style: disc outside;
margin-left: 20px; }
.form-success {
color: #56ad6a;
background-color: #ecfef0;
border-color: #56ad6a; }
.form-success a {
color: #56ad6a;
text-decoration: underline; }
.form-success a:hover {
text-decoration: none; }
.form-error,
.errors {
color: #d02e2e;
background-color: #fff6f6;
border-color: #d02e2e; }
.form-error a,
.errors a {
color: #d02e2e;
text-decoration: underline; }
.form-error a:hover,
.errors a:hover {
text-decoration: none; }
#CustomerLoginForm input:focus,
#create_customer input:focus,
#RecoverPasswordForm input:focus {
border: 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.5); }
Okay. please place below code between in theme.liquid file
Many thanks for your input - Your solution worked well.
Eventually, you can help me out with an additional question. I would like to separate the social Icons and the Menü in 2 Lines, first Social, Secon Menu (Full width) and tried a few things in the footer code, but they didn’t work out.
Here the code of the footer
{% assign footer_item_width = '' %}
{% case section.blocks.size %}
{% when 1 %}
{% assign footer_item_width = 'large--one-whole medium--one-whole small--one-whole' %}
{% when 2 %}
{% assign footer_item_width = 'large--one-half medium--one-half small--one-whole' %}
{% when 3 %}
{% assign footer_item_width = 'large--one-third medium--one-half small--one-whole' %}
{% when 4 %}
{% assign footer_item_width = 'large--one-quarter medium--one-half small--one-whole' %}
{% endcase %}
Hello,
I did this and it worked in the preview of the codes, but when I try to customize it, it won’t show.
What am I doing wrong?
can you help me?