Home>Support>Header/Masthead issues, Mobile Friendly Issues

Header/Masthead issues, Mobile Friendly Issues

By Drew, 7 years ago. Last reply by Alex S, 7 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hello! I am currently using the UNWIND theme. My website for reference: theroadtoemmaus.ca

I have a number of issues that hopefully you can help me address:

My main goal is to have an image/content slider (I’m using Metaslider) appear in the header area along with the title of the blog. I actually want it to look identical/similar to the UNWIND theme demo homepage.

Unfortunately, if I insert any widgets whatsoever the title of my blog disappears from the header, leaving it as an empty header/masthead. As such, I resorted to inserting the SiteOrigin Layout Builder, and through the Layout Builder I inserted the SiteOrigin Headline widget and the Metaslider Widget. For the Headline widget I found a font that is similar to the UNWIND theme title font. I am happy with how this looks on a computer.

The first issue I came across was that I only wanted the Metaslider Widget in the header of the homepage, not other pages. After reading through some of these posts I used CSS code to remove the Metaslider widget from other pages in my blog.

My first few questions: Is there any way to replicate the Title/Slider from the UNWIND theme without going through the above steps? Is there an easier way? And most importantly: Is it possible to insert the Metaslider widget in the BODY of my homepage BELOW the header?

I tried to do this by creating a custom homepage but then my Sidebar disappeared. When I figured out how to get my Sidebar back, it would appear NEXT to the Metaslider Widget when I want it to appear below. Also, none of my blog posts were showing up. I want it to look exactly like in the UNWIND theme demo. So, is there a way to insert the Metaslider Widget below the header on my home page, but above the blog posts, with the sidebar appearing underneath the metaslider and to the right of my blogs?

I like the way my website currently looks, but if you view it through a cellphone you will notice huge white spaces. On the homepage there is a large white space between the Title and Metaslider. Continuing in the homepage you will notice a white space between the header bottom (under Metaslider) and above the first blog post. If these were the only issues, I wouldn’t mind, but it gets worse in the other areas of my blog.

For example, go to the about section on your cellphone. You will notice a large white space below the title and the first “About” heading. How can I get rid of these large white spaces? I tried to edit the padding for mobile users on each widget and row, but it hasn’t worked or helped a bit. I also would remove the header bottom margin when editing each page, but this does not get rid of the huge white space under the heading title in the header on these different pages (about, booking, store, etc).

Do you have any suggestions? Sorry for the large wall of texts, find my questions listed below:

How can I insert Metaslider below the header on my home page yet above my blog posts on my home page?
If I must create a custom home page, how can I incorporate blog posts in my custom home page? Is this possible?
I am fine with how my website currently looks, but there are large white spaces. In the home page it is not so pronounced, but on the other pages they are quite large. How can I remove these white spaces in the mobile version? (I’ve already tried to change mobile padding, removed header bottom margins, etc)

Thanks for the help!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Drew,

    Unfortunately, if I insert any widgets whatsoever the title of my blog disappears from the header, leaving it as an empty header/masthead.

    This is actually intentional. When you add a widget to the masthead widget area, your existing masthead contents will be hidden in favor of showing just the widget area. To make things easier and give you more overall control, we actively recommend using the Layout Builder for structuring your widget area.

    For reference, the font used in the default site title is Lato Light.

    So, is there a way to insert the Metaslider Widget below the header on my home page, but above the blog posts, with the sidebar appearing underneath the metaslider and to the right of my blogs?

    Outside of adding the Meta Slier to the masthead or creating a custom home page, no. I would recommend structuring your masthead to make it look like the Meta Slider is separate to the rest of the masthead (basically, give it its own row in the layout builder).

    How can I get rid of these large white spaces?

    This spacing isn’t currently present so I’m not too sure what is actually adding this spacing. Can you please show me a screenshot of what you see? Please note that we’re currently unable to process attachments so you’ll need to upload the image to a third party image hosting like Imgur or vgy.me.

    If I must create a custom home page, how can I incorporate blog posts in my custom home page?

    You can use the Posts Loop widget to add your posts to your home page.

    To clarify, is there a specific reason you wish to use Meta Slider over the standard Posts Slider?

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More