DomGape Posted March 21 Share Posted March 21 Hi! Looking for a way to add a second button directly to the left of the 'EMAIL US' button, which will appear on every page across the site. So it should look the same, but instead of 'EMAIL US' it should have the phone number, as you can see in the mockup i've made on the homepage. Instead of the mockup I've made on the homepage, I'd like it to be next to 'EMAIL US' and appear on every page as part of the header. Website is www.brainboxlearning.co.uk, password is brainbox Thanks 🙂 Link to comment
tuanphan Posted March 21 Share Posted March 21 You can follow this  DomGape 1 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
DomGape Posted March 21 Author Share Posted March 21 9 minutes ago, tuanphan said: You can follow this  Like magic! This worked BUT any way I can make it match the button next to it? Thanks Link to comment
tuanphan Posted March 25 Share Posted March 25 On 3/21/2024 at 11:10 PM, DomGape said: Like magic! This worked BUT any way I can make it match the button next to it? Thanks I see you already figured it out? DomGape 1 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
DomGape Posted March 26 Author Share Posted March 26 20 hours ago, tuanphan said: I see you already figured it out? @tuanphan yes, that bit anyway! I’m struggling with how to add a small gap between the two buttons though? They’re touching at the minute which is too close. I’ve also used some code so they display on mobile, but again, I’d love a small gap. Ideally (on mobile) the logo on the far left, the hamburger menu on the far right, and the two buttons completely centered. Any suggestions? Link to comment
Solution tuanphan Posted March 27 Solution Share Posted March 27 On 3/26/2024 at 11:53 AM, DomGape said: @tuanphan yes, that bit anyway! I’m struggling with how to add a small gap between the two buttons though? They’re touching at the minute which is too close. I’ve also used some code so they display on mobile, but again, I’d love a small gap. Ideally (on mobile) the logo on the far left, the hamburger menu on the far right, and the two buttons completely centered. Any suggestions? You can use this code to Website > Website Tools > Custom CSS div.header-display-desktop a.btn:nth-child(2) { margin-left: 1.5vw !important; } With mobile, use this CSS code @media screen and (max-width:991px) { .header-title-nav-wrapper { order: 1 !important; flex: unset !important; } div.header-burger { order: 3 !important; flex: unset !important; right: 0 !important; } .header-actions.header-actions--right { order: 2 !important; flex: unset !important; left: 50% !important; position: absolute; transform: translateX(-50%) !important; width: unset !important; } .header-mobile-logo { padding: 0 !important; } .header-display-mobile { justify-content: space-between !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
DomGape Posted March 27 Author Share Posted March 27 3 hours ago, tuanphan said: You can use this code to Website > Website Tools > Custom CSS div.header-display-desktop a.btn:nth-child(2) { margin-left: 1.5vw !important; } With mobile, use this CSS code @media screen and (max-width:991px) { .header-title-nav-wrapper { order: 1 !important; flex: unset !important; } div.header-burger { order: 3 !important; flex: unset !important; right: 0 !important; } .header-actions.header-actions--right { order: 2 !important; flex: unset !important; left: 50% !important; position: absolute; transform: translateX(-50%) !important; width: unset !important; } .header-mobile-logo { padding: 0 !important; } .header-display-mobile { justify-content: space-between !important; } } Perfect, thank you so 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