I’d like to add a white lien to the bottom of a Gradient Navbar. It’s something I’ve used in Dreamweaver MX albeit around 20 years ago.
I’ve tried various methods but BSS doesn’t like them, while I’d prefer to have it as part of the Navbar I can live with adding as a separate element, What I can’t find is any Tutorial or Help topics covering how to set the hr attributes. Any suggestions ?
Ian
I don’t think it’s an “hr” you need there, try adding “border” to the bottom of the nav instead.
HR is a very old way of adding lines to things, Borders are the way to do it now 
Assuming you’re using a standard Bootstrap Navbar, just copy the .navbar class to your custom CSS file and add the following to the class…
border-bottom: 3px solid #fff;
You can also do this quite easily by just clicking on your Navbar, going to the Appearance panel > Border, select the bottom border icon, Style would be solid, Color #fff, Width 3px (or whatever you want.)
Just realize that it will be added as inline CSS unless you first pick your CSS file from the Dropdown menu at the top that says “Style Attribute.”
If this doesn’t help, post a link to your website and when I get a free minute I’ll look at your code.
Many thanks Printninja, the latter part about the attributes, it’s the Navbar attributes. Thanks to your help it was quick an very easy.
nav class=“navbar navbar-dark navbar-expand-md sticky-top” id=“app-navbar” style=“border-bottom: 2px solid #ffffff ;”
I went for 2px, 3px is a little wide on a Mobile etc.
Ian
You could always make the border a unique class with different widths at different screen sizes using CSS media queries, and then apply the class to your navbar in the attributes panel.
Or of you really want to get fancy, you could create a special class and do something like…
.nb-border {
border-bottom: solid #ffffff;
border-width: calc(2px + .1vw);
}
Then apply this class to your navbar, and you’ll have a border that is 2px at mobile size, and gets ever so slightly wider as you go up to larger screen sizes. the vw rule in CSS stands for viewport width. So by using the calc function, you add 1/10 of a pixel to the width of the border, so once when the screen is five times wider, the border would be 2.5 pixels, and when it’s ten times wider, it would be 3 pixels (or there abouts.)
I recently started doing stuff like this with my heading font sizes, so I have a minimum size on mobile, and the fonts get larger as the screen gets wider, and I use a media query to set a maximum size. You can see it in action on this website…
If you reduce/increase the browser width, you’ll see that the fonts in the heading shrink and grow proportionately.
Okay, sorry for the topic drift. I shall stop now.