Round Buttons on The Navigation Menu

[private]

I am requesting a code that will make the buttons on the navigation menu display round.

[elli]

Can you clarify what you mean by "round"? Are you looking for completely circular, elliptical, or just rounded edges?

[private]

Mar 16, 2020 13:06:09 GMT -8 elli said:

Can you clarify what you mean by "round"? Are you looking for completely circular, elliptical, or just rounded edges?

Either round/circular, elliptical, or just rounded edges.

[Kami]

You will need to choose one so that the code can be provided. You were asked a question with three choices and effectively just answered "yes". :P

[Retread]

Mar 16, 2020 20:39:17 GMT -8 Kami said:

You will need to choose one so that the code can be provided. You were asked a question with three choices and effectively just answered "yes".

I took that to mean "any of the above will be just fine."

With that in mind, private , you can add this to the bottom of the Style Sheet of the desired theme:

/* Elliptical Navigation Bar Buttons
Note: Button background color MUST be different 
than the Navigation Bar background-color,
else you won't see the effect!  */

#navigation-menu ul li a {
    border-radius:50%;
    margin-right:5px;
}
/* end of section */

Remember to click the Save Changes button at the bottom left of the page, or the Save Theme button near the top.

---

If you need to change the background-color of the button, switch to the Visual Editor tab, then ...

Click on Header (Top) ... that section will expand.

Click on Forum Banner ... that section will expand.

Click on Navigation Bar ... that section will expand.

Click on Button ... that section will expand.

Use the Color Picker to the right of Background Color to select a different color than what's being used for the Navigation Bar.

If desired, Click on Hover ... that section will expand.

Use the Color Picker to the right of Background Color to select a different color than you used for Button. This will make it abundantly clear which button one is about to click.

Remember to click the Save Changes button at the bottom left of the page, or the Save Theme button near the top.

[Nscalerr]

Retread you could also add a background to your bit of CSS using rgba to have it show up.
See my change for an example.

/* Elliptical Navigation Bar Buttons. */
#navigation-menu ul li a {
   background: rgba(250, 250, 250, 0.5);
   border-radius: 50%;
   margin-right: 5px;
}
/* end of section */

[Retread]

Yes Nscalerr, that will definitely work.

I'm a big fan of retaining the functionality of the Visual Editor so I try to avoid making additions at the bottom of the Style Sheet which will overwrite any of its functions. But defining the background-color of the button there will work.

[private]

Retread, thank you for explaining that.
Any of the above will be fine.

Mar 16, 2020 21:33:56 GMT -8 Retread said:

Mar 16, 2020 20:39:17 GMT -8 Kami said:

You will need to choose one so that the code can be provided. You were asked a question with three choices and effectively just answered "yes".

I took that to mean "any of the above will be just fine."

[private]

Thank you to all that replied.
I will begin using the code and the post updates.

[private]

Mar 16, 2020 22:38:44 GMT -8 Nscalerr said:

Retread you could also add a background to your bit of CSS using rgba to have it show up.
See my change for an example.

/* Elliptical Navigation Bar Buttons. */
#navigation-menu ul li a {
background: rgba(250, 250, 250, 0.5);
border-radius: 50%;
margin-right: 5px;
}
/* end of section */

Nsclaerr,
I will post this in the bottom of my style sheet.

[private]

I thank everybody for their help.
The elliptical code worked out.

I am now requesting a second, separate code for rounded corner buttons.

[Retread]

Rounded corners and elliptical use almost the same process but rather than defining the border-radius as a percent, you can specify it in pixels.

A small value such as 3px, will ease the corners slightly so they're not sharp. A larger value such as 10px will have obviously rounded corners. Even if you specify something huge like 500px, it won't affect the flatness of the long direction. But the ends will be completely round.

[private]

Mar 18, 2020 9:34:56 GMT -8 Retread said:

Rounded corners and elliptical use almost the same process but rather than defining the border-radius as a percent, you can specify it in pixels.

A small value such as 3px, will ease the corners slightly so they're not sharp. A larger value such as 10px will have obviously rounded corners. Even if you specify something huge like 500px, it won't affect the flatness of the long direction. But the ends will be completely round.

Thank you for your reply.
I am not sure that I understand.
Does that mean that I should change the border-radius to 30% and the margins to 10px?

[Retread]

Hey private,

The margin-right value can be changed if you want to adjust the spacing between the buttons.

Just change the border-radius value to something like this:

border-radius: 10px;

You can adjust the 10px, larger or smaller to suit your personal taste.

[private]

Mar 18, 2020 12:45:27 GMT -8 Retread said:

Hey private ,

The margin-right value can be changed if you want to adjust the spacing between the buttons.

Just change the border-radius value to something like this:

border-radius: 10px;

You can adjust the 10px, larger or smaller to suit your personal taste.

Retread: Oh, its the margin and the border-radius that are adjusted to that preferred value.
Thank you for clarifying.