Hide element on big screens

Bootstrap Studio Help
1

Hi folks! I'm a new member and a new bootstrap studio user. I like this application already! I've been searching in the forums without any result to my query.

Is it possible to add a <-hr-> line, "shadow", or "border" under each "Nav item" that is only visible on the XS SM MD sizes? I want them to be the invisible on LG and XL sizes. I'm using "Clean Sky" theme.

2

You would set up media queries in your CSS for that.

3

Just drag the Hr component into each of the nav items in the Overview panel. Place it under the link, give the Hr class names of mt-0 and mb-0, and use the Responsive Display setting in the Option panel to set the Display on SM to none. This will hide the Hr at Small sizes and up.

4

Thanks for the solution!