Size of global header banner

[PJS102]

Sorry if these are really basic questions.
https://www.justaddmud.co.uk

I’d really appreciate some guidance on how to make the following changes in way that will not be overridden when I update the theme. I’m using the child theme.

1) How do I get the global header banner to be tighter to the ‘Just Add Mud’ text without changing the size of the text?
Looking at the forum I added the following text to custom css:

#sf-header-banner {
padding: 0px 0!important;
}

But there is still too much padding.

2) How do I reduce the space between the ‘Top Bar left text’ and the logo so that the header is a bit tighter and more compact?

Thanks for your help!

[PJS102]

I can’t seem to edit my initial question as instructed so Im having to write a new reply.

3) I would also like to know how to change the height of the promo bar so that it is tight to the text.
looking at the forum I tried adding to custom CSS:

.sf-promo-bar.promo-text > a {
padding: 0px 0 !important;
}

But there’s still way too much padding.
Also I don’t want it to be a link but rather just a message with a promo code. I’ve got the ‘text only’ option selected but I don’t want it to be treated as a full bar link with a hover. How do I stop this?

Thanks again.

[David Martin – Support]

This extra spacing is caused because you are using a h2 format text.

You can reduce this using this CSS:

#sf-banner-widgets h2 {
    margin: 0;
    line-height: 100%;
}

[PJS102]

hi,
You’ve only answered one of the 3 points I made above.
Can you please get back to me as soon as possible with answers to the other questions.

Thanks,
Peter

[Swift Ideas – Ed]

Hi there,

1) Please add this CSS:

#sf-banner-widgets {
padding: 0;
}

2) That is as tight as it can go really, you can remove the bottom border of the top bar with this CSS:

#top-bar {
border-bottom: 0;
}

Hope that helps!

– Ed

[PJS102]

Hi Ed,
I appreciate your help but I don’t think you’ve answered point 3 above! This is getting quite frustratingg please can you reply as soon as possible.

Here it is again:

3) I would also like to know how to change the height of the promo bar so that it is tight to the text.
looking at the forum I tried adding to custom CSS:

.sf-promo-bar.promo-text > a {
padding: 0px 0 !important;
}

But there’s still way too much padding.
Also I don’t want it to be a link but rather just a message with a promo code. I’ve got the ‘text only’ option selected but I don’t want it to be treated as a full bar link with a hover. How do I stop this?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

3) Please add this to Theme Options => Custom CSS:

.sf-promo-bar {
    padding-top: 0;
    padding-bottom: 0;
}

Regarding the linking of the banner, do you mind adding a login for me so I can take a closer look?

[PJS102]

This reply has been marked as private.

[David Martin – Support]

Hi,

3) Set it to Text + Button and then add this CSS:

.sf-promo-bar.promo-button a.sf-button {
    display: none;
}

4) You are using the wrong code. Use the code found here and replace the action URL with your own. So it would be:

<form action="//justaddmud.us16.list-manage.com/subscribe/post?u=5e153038a524368604db3ffaa&id=d27495883d
" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
	
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" autocomplete="off" placeholder="Enter your email address" title="Enter your email address">
	
	<div id="mce-responses" style="display: none;">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;"><input type="text" name="b_a3950048c69f7be72a27013a9_68a002176a" tabindex="-1" value=""></div>
    
    <input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe">
    
</form>