Grid Theme - how to remove space in header

Ovini · February 26, 2022, 8:00pm

Hi everyone,

I am having a lot of trouble with all the space in my header. Would anyone know code to remove the space in the “box” in the screenshot below to move the logo and the menu up and make the header more condensed?

Much appreciated!

Patricia

KetanKumar · February 26, 2022, 8:55pm

@Ovini

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Ovini · February 26, 2022, 9:03pm

Thank you so much Ketan! The store url is oviniberlin.com

I am very new to website design and look forward to your advice regarding the header and other design tips you may have.

KetanKumar · February 26, 2022, 9:10pm

@Ovini

great thanks for url can you try this code

Go to Online Store->Theme->Edit code
Asset->/theme.css ->paste below code at the bottom of the file.

.header-tools-wrapper {
    position: absolute;
    margin-top: 24px;
}

Ovini · February 26, 2022, 9:16pm

That worked like a charm thank you so much!
I have a similar problem for the footer: would you know how I can edit the “newsletter” text? I would like to personalize and incentives people to sign up with a discount offer. Sadly my theme provides no options to edit the newsletter sign up in the footer.

The next will be:
Step inside the Ovini world of clean and sugar-free vitamin gummies.
Sign-up and save 10% off* your first purchase.

KetanKumar · February 26, 2022, 9:24pm

@Ovini

thanks for compliment

footer section can you please check news ltter block on theme setting may be allow if doesn’t there it can be done customization ocdde

Ovini · February 26, 2022, 9:29pm

Hi Ketan,

here is the newsletter code - maybe I can edit the “header” somewhere there?

.pxs-newsletter-section {
position: relative;
width: 100%;
}
.pxs-newsletter-section .newsletter-success {
font-weight: bold;
text-align: center;
}

.pxs-newsletter {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 50px 0 20px;
margin: 0 auto;
}
@media screen and (max-width: 680px) {
.pxs-newsletter {
flex-direction: column;
}
}
@media (min-width: 1080px) {
.pxs-newsletter {
max-width: 100%;
padding-top: 68px;
}
}

.pxs-newsletter-figure {
position: relative;
flex-shrink: 1;
order: 0;
margin: 0;
background-size: cover;
}
@media screen and (max-width: 680px) {
.pxs-newsletter-mobile-alignment-bottom .pxs-newsletter-figure {
order: 1;
}
}
@media screen and (min-width: 680px) {
.pxs-newsletter-desktop-alignment-right .pxs-newsletter-figure {
order: 1;
}
}

.pxs-newsletter-content {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
order: 0;
padding: 0 20px;
}
@media screen and (min-width: 680px) {
.pxs-newsletter-content {
padding: 0 50px;
}
}

.pxs-newsletter-image {
display: block;
width: 100%;
opacity: 0;
}
.pxs-newsletter-image[data-rimg=noscript] {
opacity: 1;
}

.pxs-newsletter-header {
margin: 0 auto;
text-align: center;
}
@media (min-width: 680px) {
.pxs-newsletter-header {
max-width: 80%;
}
}

.pxs-newsletter-heading {
margin-top: 0;
margin-bottom: 12px;
}

.pxs-newsletter-text {
margin-top: 0;
margin-bottom: 36px;
}

.pxs-newsletter-form .contact-form {
margin: 0;
}

.pxs-newsletter-form-fields {
display: flex;
align-items: stretch;
justify-content: center;
}

.pxs-newsletter-form-label {
display: none;
}

.pxs-newsletter-form-input {
height: 100%;
margin: 0;
}

.pxs-newsletter-form-button {
height: 100%;
}

.pxs-newsletter {
align-items: stretch;
justify-content: space-between;
margin: 0 30px;
}

.pxs-newsletter-figure,
.pxs-newsletter-content {
border: 1px solid {{ settings.border-color }};
}

.pxs-newsletter-content {
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 770px) {
.pxs-newsletter-content {
padding-top: 50px;
padding-bottom: 50px;
}
}

@media (min-width: 770px) {
.pxs-newsletter-figure {
width: 50%;
}
.pxs-newsletter-figure + .pxs-newsletter-content {
width: 50%;
}
}

@media (max-width: 769px) {
.pxs-newsletter-mobile-alignment-top .pxs-newsletter-figure {
border-bottom: 0;
}
.pxs-newsletter-mobile-alignment-bottom .pxs-newsletter-figure {
border-top: 0;
}
}
@media (min-width: 770px) {
.pxs-newsletter-desktop-alignment-left .pxs-newsletter-figure {
border-right: 0;
}
.pxs-newsletter-desktop-alignment-right .pxs-newsletter-figure {
border-left: 0;
}
}

.pxs-newsletter-heading {
font-family: {{ fonts_font_heading_family }};
font-style: {{ fonts_font_heading_style }};
font-weight: {{ fonts_font_heading_weight }};
margin-bottom: 17px;
}
@media (min-width: 770px) {
.pxs-newsletter-heading {
margin-bottom: 28px;
}
}

.pxs-newsletter-text {
font-family: {{ fonts_font_body_family }};
font-style: {{ fonts_font_body_style }};
font-weight: {{ fonts_font_body_weight }};
margin-bottom: 20px;
font-size: 1.1428571429rem;
}
@media (min-width: 770px) {
.pxs-newsletter-text {
margin-bottom: 32px;
}
}

Ovini · February 26, 2022, 9:40pm

Thank you! Should I post the newsletter code here, would that help?

Ovini · February 26, 2022, 9:40pm