Adjust Spacing on 404 pages

[123JH]

All my 404 page not found are covered by the menu…How do i fix it? and move the text down

[Prasant]

Hello Carolina,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.x-main.full {
    margin-top: 100px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[123JH]

@Prasant

.x-main.full {
margin-top: 100px;
}

So I just noticed that when i did that the menu on all my pages shows this white bar before it would show the top of my image, and the bar was transparent…How can I fix that

[friech]

Hi Carolina,

Please remove the previous CSS code given. Then open/edit your Header, and add this on your first bar Element CSS area.

body.error404 $el.x-bar-absolute {
	position: relative;
}

This way, the CSS code will only affect your 404 page.

Hope it helps,
Cheers!

[123JH]

@friech

body.error404 $el.x-bar-absolute {
position: relative;
}

unfortunately that has not worked and by removing the previous code it has affected other pages…any idea how to have the margin of the other code but with the current menu I have…maybe its about adding a rule?

[christian]

Hey Carolina,

Removing both codes given here should only revert your site to the previous state or the original issue you described. It will not further cause issues. Unless, you have introduced a syntax error to the custom CSS while copy and pasting code. Please check if you have removed the codes completely.

The issue here is that the Initial Position of your Bar was set to Absolute. That setup is commonly used for overlay navigation where a transparent background bar overlays a hero section. I don’t see that in your setup so I wonder why it’s set to Absolute. If there’s no reason for it, please set your Bar’s Initial Position to Relative. That should solve the overlapping issue without using any custom CSS.

If you wish to continue using the Absolute position, please at least give us context as to why you’re using that so we could take it into account when providing a solid solution. Also provide WP Admin access in this case.

Thanks.

[123JH]

The reason its set to absolute is because on my initial bar is because to your point I was told that to get a a transparent background bar it needs to be set to absolute and overlay the hero section.

[christian]

Thank you for providing more details. In that case, you will need to have 2 versions of your bar. Duplicate your bar first and set one to relative.

Only assign the absolute one to the pages you need the transparent navbar overlay effect then assign the relative one globally so it will be used by regular pages that does not use the navbar overlay.

This can’t be easily solved by CSS and providing custom CSS for this case would also be outside the scope of our support as you’ll need to add code everytime you need to override the bar setting to apply to specific pages.

Thanks.

[123JH]

That worked perfectly thank you!!!

[friech]

We are delighted to assist you with this.

Cheers!