how do I change my header links to resemble “buttons”?

You can probably style the links using some CSS. Can you please post a link to your site?

Sure, thanks so much!! https://cinjoje.net ??

So the first thing you should do is install a Custom CSS plugin. The Storefront theme suggests installing the Theme Customization Plugin, but it’s a bit trickier to install and use, especially for a beginner. Once you’ve installed a plugin, then you can start adding some CSS rules.

Start off by adding these three rules:

 .nav-menu li {
    border: 2px solid #ddd;
    border-radius: 5px;
    min-width: 120px;
    margin-right: 10px;
    background: #3D9CD2;
    background: -webkit-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#6666CE, #3D9CD2, #6666CE); /* Standard syntax */
}

.main-navigation ul.nav-menu>li>a {
    padding: 10px 15px;
    text-align: -webkit-center;
    text-align: center;
}

.main-navigation {
    margin-top: 15px;
}

The first rule has properties which sets most of the display properties of the buttons. The border property sets a border around the button. The current values are a 2px wide border that is solid with an off-white color The border-radius property determines how rounded the corners of the button are. The min-width property is used to make sure all of the buttons have the same width (otherwise the buttons would vary in width depending upon the length of the text). The margin-right property adds spacing between the buttons.

So note that there are five background properties listed. They all have to do with displaying the background color of the button as a gradient. That is once you add the rule, you’ll see that the buttons are blue, but are shaded darker on the top and bottom. Different browsers use different syntax when describing a color gradient, which is why there are five different rules listed. If the browser being used doesn’t recognize any of the property values, then it will default to the first one, which is just a plain blue color. In fact, if you don’t care for the color gradient, you can just remove the last four background properties and it will be a single blue color. If you want a different color for your buttons, you can use this color picker to determine what hex codes to use.

The second rule has to do with the internal spacing and alignment of the text inside the button. The padding property adjusts how much space there is around the text. The first number is for the amount of space above & below the text, the second number is for how much space there is to the sides. The text-align property is there to center the text inside the button.

The last rule just adds some space to the top of the navigation menu so it lines up correctly with the shopping cart icon to the right.

Let me know if you have any questions or would like further customizations. For example, you can add a slight shadow to give it a more 3D effect.

Wow, nice!!! ?? Sure, how do I do the 3D effect? Thank you very much!

Also, how do I use variables? For example, displaying code only to someone who is NOT logged in?

And lastly, since you are very kind to help, how do I customize links on pages?

To the first rule, add a box-shadow property at the end, so it looks like this:

.nav-menu li {
    border: 2px solid #ddd;
    border-radius: 5px;
    min-width: 120px;
    margin-right: 10px;
    background: #3D9CD2;
    background: -webkit-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#6666CE, #3D9CD2, #6666CE); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#6666CE, #3D9CD2, #6666CE); /* Standard syntax */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

The box-shadow property will add a light shadow effect around the edges of the buttons.

Then add this new rule:

.nav-menu li:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

This rule will make the buttons appear to move downward when the user clicks on them.

Also, how do I use variables? For example, displaying code only to someone who is NOT logged in?

Don’t know how you would do this, I don’t see a class name that indicates whether a user is logged in or not. There might be a javascript variable which stores this, but I don’t know which one and I’m not going to dig through the code.

how do I customize links on pages?

Not exactly sure until you actually add some content to a page that includes a link. My guess is you can use a rule like this:

#main a {
   ...
}

And just add the properties that you want depending up on how you want to style your links (color, underlines, size, bold, etc).

Okay got the links customized, thanks! ?? There also are apparently some PHP variables I can use. I’ll have to further investigate.

Thanks again! ??