Navigation Bar: Adding Boxes/Outlines Around Page Links

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!

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:

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. 

Here's a quick photoshop edit of what I'm basically trying to do.

Got it, then this thread may have the answer if you are using 7.1:

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

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.

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?

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

figured this one out! thank you!

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. 

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

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;
}