David567890 Posted January 30 Share Posted January 30 Hi everyone, I'm not a pro CSS person, but I'm using this code to put a header image at the top of every page: a {text-decoration-line:none !important;} .header-announcement-bar-wrapper {background-image:url('URL HERE'); background-repeat:no-repeat; background-size:cover;background-position: center;} .header {background-color:rgba(0,0,0,0)!important} It works. Now I want to add a thin black line at the bottom to separate it from the page. Like 2 pixels. I've tried putting it into my image and that causes huge problems with different renderings, especially mobile, but it also renders differently on different browsers and widths. Is there a CSS way to add a black line all across my banner image at the very bottom? Thank you. Link to comment
tuanphan Posted February 2 Share Posted February 2 Hi, What is your site url? We can test code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
David567890 Posted February 3 Author Share Posted February 3 (edited) Oh, sorry: www.infinitegameoflife.com The main questions I have are: 1. How can I make the header less tall? If I make a shorter image, it gets resized, so it seems like it's always that height. 2. The navigation words are all in a particular width. Is it possible to extend that width so it's wider? If I increase the space between navigation words, it just wraps to a new line. 3. For a black line at the bottom, SS support says there isn't a way to do it in the header. I can't do it outside of the header or it will scroll away, so I don't see a way to add the black line without some kind of code injection. At the moment, #1 and 2 are my bigger problems. I don't expect to do anything about #3. Thanks. Edited February 3 by David567890 Link to comment
tuanphan Posted February 8 Share Posted February 8 #1. Add to Design > Custom CSS .header-title-logo img { max-height: 100px; } .header-announcement-bar-wrapper { padding-top: 1px !important; padding-bottom: 1px !important; } .header-nav { position: relative; bottom: -10px; } #2. Use this CSS nav.header-nav-list { flex-wrap: nowrap; } #3. Use this CSS .header-announcement-bar-wrapper { border-bottom: 3px solid red; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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