Need Help Please. Outline Around NavBar Links

Hi Everybody,

Not sure how or the simplest route to take. I would like to put a grey outline around my white text links in the navbar. I guess the other way to describe it would be a Stroke around the text. Like what Photoshop has. I have uploaded an example.

Thank you!

Try adding the following to your css

h1 {
-webkit-text-stroke: 1px black;

Source with examples here: text-stroke | CSS-Tricks


Thanks very much for the reply. My css for the navbar is locked.

You can add your own styling by coping the navbar classes into your styles.css file as this will overwrite the default styling :+1:

I seen that, might sound stupid, once I copy it how does that new style sheet attach itself to the navbar? I know BSS you just can’t change it in the page.

Custom style sheets with copied Bootstrap rules automatically override the rules in the standard bootstrap.min.css file (as long as you don’t change the class name.)

If you make a new class name, then you have to add it to the component via the Attributes panel. By design, user-made style sheets have greater weight in the CSS cascade than the base Bootstrap CSS.

Also be sure to reorder your CSS files so your custom file is at the bottom, otherwise it may not overwritten as you expect. They do get out of order at times for some reason.

1 Like

Thank you everybody. I will give it a go. Thanks again for the assistance.

1 Like