Mobile Logo/Tagline Gap

Hi JJ Smith,

Sounds like something we can do w/ CSS.

But to be sure, can you link us to the site/page in question? So we can inspect the site and see what can be done.

You can also provide us a mockup image of the layout you want so we can use it as reference to be sure w/ the CSS write-up. :D

I haven't published the changes yet as I'm still working on the site, but let me give you a little more of what I did.

Keep in mind this is for mobile display only.

The logo is set in place, then I did a hook generate_after_logo and moved the tagline to the right, and then on mobile, it stacks correctly.

The issue is I have too much space from the tagline to the navbar and want to shrink it to bring it closers without the gap.

Thank you,
JJ Smith

Hi there,

can you share the code you added to add the tagline in the generate_after_logo hook?

Here you go:

<br><p class="site-description"><h2>Description Here<br><center>Phone Here</center></h2></p>

I used the <br> to space the tagline from the logo, which worked, but I need to shink the gap under the tagline to the navbar.

Thank you,
JJ Smith

Can't say for certain but you have a p and h2 element both which may attract the bottom margin from the typograghy settings

Try this CSS:

p.site-description,
.site-description h2 {
    margin-bottom: 0;
}

That moves the tagline up and down, but not the navbar up closer to close the gap.

I have tried that before, and it doesn't work.

Thank you,
JJ Smith

Would it be possible that we revisit this when we can see the site ? There could be a dozen things that cause a gap , and we're gonna do a lot of shooting in the dark :)

So how do you move the .inside-header padding to negative?

That would be my issue to move the bottom padding up.

Thank you,
JJ Smith

Hi there,

Negative values are not valid for paddings, the smallest value would be0.

So something like this:

.inside-header {
    padding-bottom: 0;
}

That helps some, which I did, but is there any way to decrease the space from the inside header to the navbar?

Thank you,
JJ Smith

You can try this, but as I'm not seeing your site I don't know what your header structure is, so it's just pure guessing:

.inside-header {
    padding-bottom: 0;
    margin-bottom: -20px;
}