Masthead has too much white space between logo and header text

With the larger logo it does depend on the width of the logo image itself. If you want to you can change to that and I’ll see what we can recommend.

Magus

Hi Mitch

No worries, You should note that if you use the header sidebar area to add more content then this will replace the tagline where you had your support text. If you want to keep this then you will have to add it back into a visual editor or text widget.

If the space between masthead items is too great for the look you want to achieve we can always reduce the element padding with custom CSS.

Let us know which way you want to go.

Magus

Hi Mitch

He has created a customized masthead for this. You can achieve the same result using a Visual Editor Widget in the Header Sidebar using Font Awesome icons for the images.

Please try this in a Visual Editor Widget in Text Mode

<span class="fa fa-phone-square"> Telephone Number</span>
<a href=""mailto:[email protected]"><span class="fa fa-envelope-square"> Email address</span></a>
<a href="/contact">Contact</a>

We can the add styling with Custom CSS afterwards

Magus

Hi Mitch

That is a known bug in the custom CSS Editor. You should still be able to use keyboard shortcuts for copy and paste.

The editor is built on a technology called codemirror. This bug has been identified in their system. It has been caused by a javascript issue accessing the clipboard.

Magus

Hi Mitch

Use this to target the header widget text

#header-sidebar .textwidget span {
    font-size: 2em;
    font-weight: bold;
}

for the email address you can use this span

<a href="mailto:[email protected]"><span class="fa fa-envelope-square"> [email protected]</span></a>

I left an errant quote mark in the original. Just change the email to yours and the font awesome icon to one of your choosing.

Magus

Hi Mitch

You have already entered the CSS to remove the top margin from the sidebar when viewed on small screen devices. The gap is being added by the logo image itself which has white space below the logo.

TBH I have tested right down to below standard screen size and it looks fine. The only comment I would make would be about the space between the slider and the page text. If you remove the empty pagebuilder row from the page I think you would be sorted.

Magus

Hi Mitch

Not quite what I meant :)

The image has 26px transparency on the image canvas above and below the logo. This is what is giving you the extra space. The sidebar content can get no closer to the logo than the bottom of the image canvas.

Magus

Hi GTint

Please navigate to Settings->Page Builder->Layout.

There is a setting on here for the Row Bottom Margin. Adjusting this will bring the rows closer together. this can also be overridden using the bottom row margin option under Layout in the row editor of the page.

Magus