Mork_Walfe Posted March 1, 2023 Share Posted March 1, 2023 Hi all, I am currently working on my trial site and am customizing the header. I wanted it to float off the page in a pill shape. Which I was able to achieve, but I had to use the command overflow: hidden. Which made the folder dropdowns disappear when overflowing. If I make the overflow visible the corners are no longer rounded. Does anyone know how to fix this? My code: // Header Style .header{ margin:10px; border-radius: 60px; overflow: hidden box-shadow: 6px 7px 15px #DCE1F4; } //header dropdown// /* Folder dropdown style */ .header-nav-folder-content { background: #ffffff !important; padding: 0!important; .header-nav-folder-item a { padding: .5em 1em!important; } .header-nav-folder-item a:hover { background: #7996D1!important; color: #ffffff!important; overflow: visible; } border-radius: 3.5px; border: 1px solid #003366; box-shadow: 5px 3px 10px rgba(0,0,0,0.25); } .header-nav-folder-content a { color: #003366 !important; padding-bottom:.5rem!important; hover { } } Link to comment
tuanphan Posted March 6, 2023 Share Posted March 6, 2023 Hi, What is site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Mork_Walfe Posted March 6, 2023 Author Share Posted March 6, 2023 Here you go: https://oriole-purple-tlln.squarespace.com/ Password: Batteryboys So weird, I thought I already posted this. Link to comment
Solution tuanphan Posted March 8, 2023 Solution Share Posted March 8, 2023 On 3/6/2023 at 11:33 PM, Mork_Walfe said: Batteryboys Don't remove any code in your current code. Add this to Design > Custom CSS .header-announcement-bar-wrapper, .header-background-solid, .header-dropshadow { border-radius: 50px !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Mork_Walfe Posted March 8, 2023 Author Share Posted March 8, 2023 Thank you so much tuanphan! I appreciate you! Link to comment
IZSRI Posted April 22, 2023 Share Posted April 22, 2023 On 3/8/2023 at 12:47 PM, tuanphan said: Don't remove any code in your current code. Add this to Design > Custom CSS .header-announcement-bar-wrapper, .header-background-solid, .header-dropshadow { border-radius: 50px !important; } Hey, is there any way to make these rounded floating header corners only apply on desktop - and leave mobile untapped (or perhaps inset the mobile header so that it is also floating) Link to comment
tuanphan Posted April 23, 2023 Share Posted April 23, 2023 On 4/22/2023 at 4:35 PM, IZSRI said: Hey, is there any way to make these rounded floating header corners only apply on desktop - and leave mobile untapped (or perhaps inset the mobile header so that it is also floating) change code to this @media screen and (min-width:992px) { .header-announcement-bar-wrapper, .header-background-solid, .header-dropshadow { border-radius: 50px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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