White line above and below nav bar

[KimAnn]

Hello-
There’s a thin white line above and below the logo bar. How can I get rid of this?

SEE HERE

Website is https://alisonljames.com/

I’ll PM login so you can see the homepage.

[Prasant]

Hello Kim,

Thanks for writing in!

Please add following CSS under X > Theme Options > CSS:

.x-logobar {
    border: none;
}

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.

[KimAnn]

Thank you- I have tried that previously- it only works for the top of the nav bar. When scrolled all the way up on the page, there is still a white line under the logobar. It almost seems like maybe it has something to do with the sticky nav?

Please advise.

Also, while you are in there I am having another issue- there is a big gap between the slider and “The Mission” section and I can not find where this space is coming from. I would like to get rid of it completely.

Look forward to your response.

[Prasant]

Hello Kim,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0 !important;
}

.home .hentry {
    margin-top: 0 !important;
}

Thanks.

[KimAnn]

Thank you- it does still leave a white line at the very top when scrolled all the way up to the top.

Also in section 2 of the page, out background image has a gold border we want to always show. When we stretch the webpage on a large computer part of the background image starts to get cut off, and we lose that border. How can we keep it so the background image does not change size/shape even as the window changes size/shape?

Thanks again.

[friech]

Hi Kim,

Where did you add the Custom CSS provided by Prasant? I don’t see it being applied on your site and I don’t see it on your Theme Options > CSS either.

I did go ahead and added it and that fixed the white line issue. Please clear your browser’s cache on your end.

Regarding the gold border issue, on your section’s background-size option, please set it to 100% 100%

Hope it helps,
Cheers!

[ruenel]

Hello Kim,

I have logged in and checked your site. I am not seeing any white line.

If you want to remove the border image of your logo, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

#menu-item-34 a span {
    border-image: none;
}

For your background image, you can set the background size to “contain” or “100% 100%”. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto; but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.