akorbiel Posted April 12, 2020 Share Posted April 12, 2020 Site URL: http://www.arthurkorbielphotography.ca Hey! I want to add a call to action button/highlight button in my main navigation for the last link (Book Now) I've already tried a bunch of other css codes , however they don't seem to work for me. When I add the following code: .main-nav li:last-child a { background: #000; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } It does exactly what I'm looking for, except for one thing - It applies the look to the last item in of the navigation headings/drop-downs (See Screenshot). I want it only applied to the "Book Now" in the main navigation, not the menu items in the dropdown menus. My website is - www.arthurkorbielphotography.ca Link to comment
tuanphan Posted April 12, 2020 Share Posted April 12, 2020 Use this code .main-nav .nav-wrapper>ul>li:last-child a { background: red; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } akorbiel 1 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
cherylr Posted September 30, 2020 Share Posted September 30, 2020 I can't seem to get this, or any similar code to work to make the last item of my navigation a button. Is this code for 7.0 and if so, do you know how I might do it in 7.1? Working here:https://bassoon-circle-b5b6.squarespace.com/ password NWFC Link to comment
tuanphan Posted September 30, 2020 Share Posted September 30, 2020 2 hours ago, cherylr said: I can't seem to get this, or any similar code to work to make the last item of my navigation a button. Is this code for 7.0 and if so, do you know how I might do it in 7.1? Working here:https://bassoon-circle-b5b6.squarespace.com/ password NWFC nav>.header-nav-item:last-child a { background: red; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } cherylr 1 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
cherylr Posted September 30, 2020 Share Posted September 30, 2020 This is awesome. Thank you so much. Weirdly, the text changes its position a little - it's a bit lower. Any idea why or how to fix it? Link to comment
tuanphan Posted September 30, 2020 Share Posted September 30, 2020 nav>.header-nav-item:last-child a { background: red; color: #fff !important; padding: 10px 20px !important; border-radius: 20px; } nav.header-nav-list { align-items: center; } cherylr 1 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
cherylr Posted September 30, 2020 Share Posted September 30, 2020 AMAZING thank you so much! Link to comment
kozanno Posted January 17 Share Posted January 17 On this website, you can see i've done this (some time ago actually) but you'll see in the screenshot that it also affects the drop down menu. In this case Im using the below code. The :last-child piece doesn't seem to do anything for me. Can anyone help resolve this affecting the drop down menus as well. this template will change in the future; I realize its sun-setted, but for now, I'd like to resolve this. The website is: https://www.warpaintinternational.com/#about. See screenshot. .main-nav ul li:nth-child(7) { border: solid 0px; padding: 5px; a:hover { padding: 10px; background-color: #e04937; } a { padding: 10px; border: solid 2px; color: #fff; background-color: #e04937; } } Link to comment
tuanphan Posted January 17 Share Posted January 17 1 hour ago, kozanno said: On this website, you can see i've done this (some time ago actually) but you'll see in the screenshot that it also affects the drop down menu. In this case Im using the below code. The :last-child piece doesn't seem to do anything for me. Can anyone help resolve this affecting the drop down menus as well. this template will change in the future; I realize its sun-setted, but for now, I'd like to resolve this. The website is: https://www.warpaintinternational.com/#about. See screenshot. .main-nav ul li:nth-child(7) { border: solid 0px; padding: 5px; a:hover { padding: 10px; background-color: #e04937; } a { padding: 10px; border: solid 2px; color: #fff; background-color: #e04937; } } Change to this .main-nav ul.cf>li:nth-child(7) { border: solid 0px; padding: 5px; a:hover { padding: 10px; background-color: #e04937; } a { padding: 10px; border: solid 2px; color: #fff; background-color: #e04937; } } 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