How do I get rid of this annoying gray bar in the middle of my wordpress theme?

The gray bar is being created by this CSS rule in style.css:

#st-header-image {
   position: relative;
   border-bottom: 5px solid #bcc0c3;
}

It looks like you are using different templates for each page. When I examine each page, the “home” page has a DIV with an id=”st-banner1-wrapper” while the “root” page has a DIV with an id=”st-banner0-wrapper”. But the reason why the gray border is appearing on the “home” page and not the root page is because on the root page, you have a DIV with an id=”st-banner0-curve” which is displaying another image (showcase-curve.png). That DIV is hiding the bottom border of the header image because of this CSS rule:

#st-banner0-curve {
   max-height: 70px;
   position: absolute;
   width: 100%;
   bottom: -5px;
   z-index: 2;
}

The bottom value of -5px moves the DIV up by 5px, hiding the 5px-wide bottom border of the header image.

Thank you for the kind response but I am rather confused here. How do I get rid of the gray bar then? Is it as simple as removing the code you posted up above and then hitting save? Sorry I am not very good when it comes to coding and stuff so I am unsure as to what to do here and am wondering if just removing the code would fix the problem thanks.

OK, I installed the theme so I could take a look, and I see what happened. You created another header image with a curve in it so that the non-home pages would have the same looking curve as the home page. It’s weird that the theme would just have that curve on the home page, you’d think they’d try to have a consistent look across all pages.

OK, to solve your problem, we can hide the bottom border of the header element through some custom CSS, but because Celestial Lite doesn’t have a custom CSS option, you’ll have to either create a child theme or use a plugin like JetPack or Custom CSS Manager. I recommend Custom CSS Manager, it’s very easy to use. Once you have it installed, you’ll want to add this CSS rule:

#st-header-image {
   border-bottom: 0;
}

By the way, you should not edit the theme’s files directly. If the theme gets upgraded because of feature enhancements or security patches, any changes made to the theme files will be lost.

As a side note, you’ve probably also noticed a gray bar towards the top of the root page that’s not there on the “home” page.

Hi thanks again for the response. Since you are saying that I should not edit the themes filed directly does this mean that I should go back and add that code that I deleted from the file that you posted in your original response to me? I deleted this code from the CSS styles part of the code and was able to remove the gray bar from showing up in the middle of each page:

#st-banner0-curve {
max-height: 70px;
position: absolute;
width: 100%;
bottom: -5px;
z-index: 2;
}

I wasn’t sure I just figured the theme would work fine without any problems if I removed that part of the code. So I should just insert that code back to where I deleted it from then? I will also try now to see how to get rid of this gray bar from the top of the main page. I did not notice this until your brought it to my attention thank you for the update.

Since you are saying that I should not edit the themes filed directly does this mean that I should go back and add that code that I deleted from the file that you posted in your original response to me?

You can leave it alone since you’ve already made the change. If the theme gets updated, the gray bar will probably show up again, but it won’t affect the functionality of your site. You’ll just have to remember to either do the change again, or go back & do it the right way the next time.

Thank you and now one last thing. On the main page (not the home page but the main page) it has that gray bar that you were talking about at the top. Is there a code I can add to my CSS plug in to remove that bar from the top? I downloaded the plug in and just to be safe inserted the code that you gave me so that if the theme does happen to update sometime I won’t run into that problem however the gray bar at the very top that you brought to my attention remains there even after putting the code you gave me.