[59] Pride Flag Navs

[lina_trinch]

Horizontal Code:
<div style="background: center/cover url('IMAGE_URL'), #fff; width: 400px; height: 200px; margin: auto; display: flex; flex-direction: column;"> <a href="URL" style="background: rgba(255, 0, 0, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(255, 165, 0, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(255, 255, 0, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(0, 128, 0, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(0, 0, 255, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(128, 0, 128, 0.8); min-height: 0; height: 100%; width: 100%;" class="customLink"></a> </div>

Vertical Code:
<div style="background: center/cover url('IMAGE_URL'), #fff; width: 400px; height: 200px; margin: auto; display: flex; flex-direction: row;"> <a href="URL" style="background: rgba(255, 0, 0, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(255, 165, 0, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(255, 255, 0, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(0, 128, 0, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(0, 0, 255, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> <a href="URL" style="background: rgba(128, 0, 128, 0.8); min-width: 0; width: 100%; height: 100%;" class="customLink"></a> </div>





Add This Code to Layout CSS:
.customLink { transition: min-height 0.5s, min-width 0.5s !important; } /* for width-size links */ .customLink:hover { min-height: 200px !important; } /* for height-size links */ .customLink:hover { min-width: 400px !important; }

❖ These codes were released early on the Patreon for Pride Month! Feel free to check out things over there if you want early codes or some exclusive content. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ There are two versions of this code! Mainly because there are many different looking flags out there and this was the easiest way to cover them all. Feel free to add/remove as many bars as you want! ❖ The animation on hover only works on journal layouts. It will not work in an entry page (like here). If you want to add those effects, be sure to copy/paste the third code available above to the end of your layout's CSS on this page. ❖ The colors are slightly transparent and there's an option for you to add a background image, much like in the GIF example above. ❖ No credit link is included in the code. It's okay if you don't add one somewhere else. Ctrl+F & Replace: ❖ IMAGE_URL - Add whatever image you like here. Leave blank if you only want colors. ❖ URL - Link URL for each bar. #fff Default background color if no image is added. rgba(255, 0, 0, 0.8) Transparent red. Remove the 0.8 or change it to 1 if you want to remove the transparency. Same goes for the ones below. rgba(255, 165, 0, 0.8) Transparent orange. rgba(255, 255, 0, 0.8) Transparent yellow. rgba(0, 128, 0, 0.8) Transparent green. rgba(0, 0, 255, 0.8) Transparent blue. rgba(128, 0, 128, 0.8) Transparent purple.