robertmatlock93 Posted July 31, 2022 Share Posted July 31, 2022 Site URL: https://www.cantervice.com/ Hey all, I'm trying to figure out how to customize the navigation links to have a box or outline around them instead of just plain text. Basically giving the Home/Music/Merch etc. the typical button appearance. The end goal of building this site is for it to have a very "terminal" like appearance. Hopefully that makes sense. Any and all help would be greatly appreciated! Link to comment
derricksrandomviews Posted July 31, 2022 Share Posted July 31, 2022 If you have 7.1 you can change Nav links into buttons, 7.0 is a bit trickier here is a video guide that tells you how to do both: E-W 1 Link to comment
robertmatlock93 Posted July 31, 2022 Author Share Posted July 31, 2022 11 minutes ago, derricksrandomviews said: If you have 7.1 you can change Nav links into buttons, 7.0 is a bit trickier here is a video guide that tells you how to do both: Unfortunately this only tells you how to add a single button to your nav bar, which I know how to do. I'm trying to turn each individual nav link into a button, or at least learn how I can add a background behind each individual text item and/or an outline around each. However to get the result I'm looking for. Link to comment
robertmatlock93 Posted July 31, 2022 Author Share Posted July 31, 2022 Here's a quick photoshop edit of what I'm basically trying to do. Link to comment
derricksrandomviews Posted July 31, 2022 Share Posted July 31, 2022 Got it, then this thread may have the answer if you are using 7.1: tuanphan 1 Link to comment
Solution tuanphan Posted August 4, 2022 Solution Share Posted August 4, 2022 On 8/1/2022 at 4:09 AM, robertmatlock93 said: Here's a quick photoshop edit of what I'm basically trying to do. Add to Design > Custom CSS div.header-nav-item a { border: 1px solid blue; padding-left: 10px !important; padding-right: 10px !important; } E-W and robertmatlock93 1 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
hartley Posted February 18, 2023 Share Posted February 18, 2023 hey @tuanphan! How do I: a) Make that outline into a solid box b) Customize color of box c) Only have the box around one of the navigation links...like this vvv Link to comment
E-W Posted February 18, 2023 Share Posted February 18, 2023 (edited) 1 hour ago, hartley said: hey @tuanphan! How do I: a) Make that outline into a solid box b) Customize color of box c) Only have the box around one of the navigation links...like this vvv Hey, To make the background a solid color add this code to @tuanphan's code above: background-color: #fff; To only target one nav item use the :nth-child selector like this: div.header-nav-item:nth-child(2) { background-color: #fff!important; } In addition, you probably want to adjust the size of the box around each item with some padding on top and bottom. Edited February 18, 2023 by E-W Link to comment
hartley Posted February 18, 2023 Share Posted February 18, 2023 Thank you so much! I would like to adjust padding...would you mind sharing how to do so? And how to adjust font color for just that item as well? Marcato 1 Link to comment
tuanphan Posted February 21, 2023 Share Posted February 21, 2023 On 2/19/2023 at 12:52 AM, hartley said: Thank you so much! I would like to adjust padding...would you mind sharing how to do so? And how to adjust font color for just that item as well? What is site url? We can adjust code easier 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
hartley Posted February 21, 2023 Share Posted February 21, 2023 figured this one out! thank you! Link to comment
MaryLou Posted July 7, 2023 Share Posted July 7, 2023 I am actually trying to get a header caret just like the one next to "feeds" on this nav bar above. A caret that drops down. Done extensive research and maybe I am not looking in the right place. Link to comment
_yohandeschamps_ Posted July 14, 2023 Share Posted July 14, 2023 (edited) On 8/4/2022 at 8:25 AM, tuanphan said: Add to Design > Custom CSS div.header-nav-item a { border: 1px solid blue; padding-left: 10px !important; padding-right: 10px !important; } Hey @tuanphan, is there a way to do that but on one link only ? Like having a border just on the nav " Contact" ? My website is: https://www.yohandeschamps-photography.com/. Thank you Edited July 14, 2023 by _yohandeschamps_ Link to comment
tuanphan Posted July 18, 2023 Share Posted July 18, 2023 On 7/15/2023 at 6:13 AM, _yohandeschamps_ said: Hey @tuanphan, is there a way to do that but on one link only ? Like having a border just on the nav " Contact" ? My website is: https://www.yohandeschamps-photography.com/. Thank you Use this code div.header-nav-item:nth-child(4)>a { border: 1px solid blue; padding-left: 10px !important; padding-right: 10px !important; } _yohandeschamps_ 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment