mayflyaway Posted February 24, 2020 Share Posted February 24, 2020 Site URL: http://www.rachaelrenee.photos Hi there, I am trying to code a button into my nav bar like the CTA button on some of the templates. I did this on a different template, so I took the code form there and have been trying to figure it out. I basically want it to be an outline button, but I haven't fully edited the code yet, because I can't seem to figure out how to make it apply to the last nav item. the "Book real estate photos" is the one I want to turn into a button. Help is appreciated! Here is the code ive been working with... with edits I made that dont work... /*contact button*/ #topNav .nav-item:last-child { background-color: #EDD59E; padding: 10px 10px; border-radius: 3px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4) } .nav-item:last-child:hover { background-color: white; padding: 10px 10px; border-radius: 3px; } Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 div#topNav>nav>ul>li:last-child a { background-color: #EDD59E; padding: 10px 10px; border-radius: 3px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); } 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
mayflyaway Posted February 24, 2020 Author Share Posted February 24, 2020 4 hours ago, tuanphan said: div#topNav>nav>ul>li:last-child a { background-color: #EDD59E; padding: 10px 10px; border-radius: 3px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); } This works great - now I've added some styling but cant seem to figure out how to get padding on the left and ride side of the text, and reduce the padding on top and bottom Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 29 minutes ago, mayflyaway said: This works great - now I've added some styling but cant seem to figure out how to get padding on the left and ride side of the text, and reduce the padding on top and bottom padding-right: 10px !important; padding-left: 20px !important; padding-top: 10px !important; padding-bottom: 10px !important; 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
mayflyaway Posted February 24, 2020 Author Share Posted February 24, 2020 so close! Now it is popping it up out of line with the rest of the nav bar. Any ideas? http://www.rachaelrenee.photos/ Link to comment
tuanphan Posted February 24, 2020 Share Posted February 24, 2020 57 minutes ago, mayflyaway said: so close! Now it is popping it up out of line with the rest of the nav bar. Any ideas? http://www.rachaelrenee.photos/ #topNav ul { display: flex; align-items: center; } 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
mayflyaway Posted February 24, 2020 Author Share Posted February 24, 2020 @tuanphan you rock. thanks so much. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.