Adding Nav Buttons To Bedford

I have searched and tried several CSS codes however no success.

I'm wanting to add an additional button or two to the navigation menu.

I'm using the supplied button in Bedford theme but wish to add more.

 

Can you share your website URL?

Do you have the links you want as buttons in the navigation currently as links?

Thanks for the reply...No Sir the site is under development. I'm a collaborator and was given this task.

The site owner wishes to keep content private until launch.

However the slugs will be https://mysite.com/volunteer and https://mysite.com/take-action

Sadly makes life more difficult to help you, you can try this Custom CSS:

#headerNav nav a [href="/volunteer"], #headerNav nav a [href="/take-action"] {
  padding:6px 12px;
  border:1px solid #fff;
}

No Sir no luck with the code you shared.

I have found that the following CSS turns the complete nav back ground black

#mainNavigation:last-of-type {
  background:#000;
  padding: .3rem 1rem;
  color:#FFF!important;
}

and this CSS makes a box around the nav and on another thread this was the solution.

#mainNavigation  {
    background-color: transparent;
    text-color: #3582a3;
  text-decoration: none;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 5px;
    border: 2px solid #3582a3;
  font-family: proxima-nova;
    font-weight: 600;
    letter-spacing: 2px;
    margin-left: 1em;
    padding: 1em 1.5em !important;
    display: block;
}

This makes my 6th nav link a button however we are looking to match the same buttons on the site.

This could work if we could round this button. I'm not to versed in CSS as to know how to change.

#mainNavigation div:nth-child(6) a {
    background: #000;
    color: #fff;
    font-size: 15px;
    padding: 5px 10px;
}

1 hour ago, StanWeb8305 said:

however we are looking to match the same buttons on the site.

Not sure what your buttons look like.

1 hour ago, StanWeb8305 said:

This could work if we could round this button.

Add:

border-radius:40px;

Thank you so much, your tips lead me down the right path.

Here is what I used. This works well as any link in nav menu may be made a button.

Edit-Only issue is getting button to display on mobile devices.
#mainNavigation div a[href="/application"] {
    background: #020079;
    color: #fff;
    font-size: 15px;
    padding: 15px 10px;
    border-radius: 30px;
    color:white!important;   (Added to disable black text on hover)
}