Help with Fixed Top

Support
#1

Hello Team,

I’ve been testing and trying out different code samples but nothing I have found works.
Right now, my website is setup with a bunch of dummy content.

How would i go about getting my header to be full width on the boxed layout, and when you scroll down, have it shrink to a different size?

Something very similar to this websites homepage:
http://roaring.earth/

I would love to have that effect, and then have the main content be boxed, like they have it.

Thanks!! I honestly want to thank all of you guys for helping me with this journey.

P.S, if you navigate to featured -> photographer / the rev slider is messed up and not below the header. Any idea on how to fix this? It happens with all of the rev sliders in just the featured section of the menu.

#2

Hi there,

Unfortunately, you can not achieve that effect as the boxed layout also limits the header to the main boxed container. There is an alternative solution for this and it needs a little bit of customization.

First, go to the X > Launch > Options > Layout and Design and set the website to be fullwidth. Then go to X > Launch > Options > CSS and add the CSS code below:

body .x-main.full {
    margin: 0 auto;
	border: 1px solid rgba(0,0,0,0.275);
	border-top: 0;
	border-bottom: 0;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.125);
	padding: 30px;
	max-width: 1000px;
}

Change the max-width: 1000px; section of the code to whatever size you want the box has. This way the whole content of the website will be boxed but the header/footer/above and below masthead section will be full width.

Please kindly consider that our theme does not have the feature you have on your mind out of the box and this is a customization request which is outside of our support scope. The workaround we suggested was a starting point to help you know how to achieve the customization, but the code may not be perfect and you need to continue fine-tuning it yourself or consider hiring a developer to do it for you.

Thank you for your understanding.

#3

That’s perfect, just what I needed.

  • Any way to hide this on mobile and tablet?
  • And how would i go about setting my featured image for my posts to evenly fill out the box?
    If you go to my search bar, type in alabama, click the post, you will see what im talking about.

I want it to look like it does with this code, except this code messes it up for mobile and tablet.

.page .x-main.full .hentry .entry-featured, .single-post .x-main.full .hentry .entry-featured {
margin-top: -65px;
width: 2000px;
margin-left: -31px;
}

#4

Hi,

To make code affect desktop only, you can change it to his.

@media(min-width:980px;) {
body .x-main.full {
    margin: 0 auto;
	border: 1px solid rgba(0,0,0,0.275);
	border-top: 0;
	border-bottom: 0;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.125);
	padding: 30px;
	max-width: 1000px;
}
}

To fix featured image, you can add this code in Theme Options > CSS

.page .x-main.full .hentry .entry-featured, .single-post .x-main.full .hentry .entry-featured {
     margin-left: -30px;
    margin-top: -35px;
    margin-right: -30px;
}

Hope this helps

#5

Both worked great, thank-you very much!

#6

Glad that we could be of a help :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.