Moving Photo Up

Support
#1

I am looking to move the top photo on this page up so it’s under the header. How exactly do I do this?

www.bravepandacreative.com/bible-center-church

#2

Hi there,

Thanks for writing around! Are you referring to this photo?

If yes then give your section (that has this image) a class by inspecting the section first and then click on Customize tab and in Class field add image-section

Then you can add the following code in the Theme Options > CSS:

.image-section {
    margin-top: -80px;
}

Adjust the margin value as per your need.

Hope this helps!

#3

Hmm…perhaps I’m doing something incorrectly, but I did that and nothing happened.

#4

Hi again,

I checked your page and you’ve done all the things right, just change the previous code with the following code:

.image-section {
    margin-top: -80px !important;
}

Hope this helps!

#5

Hmm…I did that too and it still didn’t work. Any suggestions?

#6

Hello @brockburwell,

Thanks for updating the thread. :slight_smile:

On my end I can see the changes getting reflected. Please see the screenshot. https://cl.ly/431I300p3u1r

Please clear browser cache and then try accessing the website again.

Thanks.

#7

Perhaps I didn’t properly communicate what I wanted. I want the photo to be under the header. The header is transparent and I want the photo to be under the header like it is on the homepage.

#8

Hi @brockburwell,

I have checked your setup and I could see that you have already adjusted your CSS.

This screenshot below shows that it would be the right CSS so that your header will look the same with your homepage.

x-navbar {
    box-shadow: none;
}

.x-navbar, .x-navbar .sub-menu {
    background-color: hsla(0, 0%, 100%, 0) !important;
}

Adjust the CSS that you get so that you will achieve the exact look of your site.

Hope it helps.

Let us know how it goes.

Thanks.

#9

Perfect! One last question.

How do I change the color of my menu on that page to white so it’s viewable?

#10

Hi There,

Please add this to Theme Options > CSS

.page-id-936 .x-navbar .desktop .x-nav > li > a,
.page-id-936 .x-navbar .desktop .sub-menu li > a,
.page-id-936 .x-navbar .mobile .x-nav li a {
	color: white;
}

Hope it helps,
Cheers!

#11

Great thanks! How do I find the page ID for my other pages in case I want to change those as well?

#12

Hi There,

To find a post/page ID, please take a look at this article: https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59.

Hope it helps :slight_smile:

#13

That link helps you find the page ID on posts, how do I find the page ID on pages. I want to do what you showed me above to more of my pages.

#14

Hi There,

The page ID should be the same as posts ID.

Regards!

#15

Thanks! That worked perfectly on every page except for one - the page below. What am I doing wrong?

#16

Hi there,

You missed adding the class image-section to the first section that contains the slider.

Hope this helps.

#17

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