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.