PaireDesign Posted July 8 Share Posted July 8 Hi! I found coding to add a banner image above the main menu, however when I add the code there is also this added space to all of the pages on the site, I'd like to remove this space but I'm not sure how, any help is appreciated! My site URL is www.pairedesign.com / code is 12345 Below is the code I used - /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(IMAGE URL HERE); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 700px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Link to comment
Solution Lesum Posted July 8 Solution Share Posted July 8 @PaireDesign Hi! You can add this code to remove the space above the rest of the pages: body:not(.homepage) .page-section:first-child { padding-top: 0 !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? Link to comment
PaireDesign Posted July 8 Author Share Posted July 8 THANK YOU SO MUCH! This worked great for all the pages, I'd like to remove the added space from the homepage as well, is there a way to do so? Thank you again, you're awesome! Lesum 1 Link to comment
PaireDesign Posted July 8 Author Share Posted July 8 I added this - .page-section:first-child { padding-top: 0 !important; } and it worked! Thank you SOOO much!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment