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; } robertmatlock93 and E-W 1 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
hartley Posted February 18 Share Posted February 18 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 Share Posted February 18 (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 by E-W Link to comment
hartley Posted February 18 Share Posted February 18 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 Share Posted February 21 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 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