What’s the best way to get icons as shown below in a vertical header?
I know can use emoji’s found on emojipedia but they’re all different colors so will look very messy.
Is there a way to use fontawesome or some other icon resource?
Pieced together a bunch of prior comments here on the forum to figure this out. Result is nice, but would prefer the hover state as shown in the above picture, where it changes not just the text font but highlights the whole row section over the text. Is this possible?
Here is what I did:
- switched blocks from “header with user profile” to “header with sublinks, icons, and description”
- created the various page links as “sublinks” under 1 parent link
- reduced size of the dropdown arrow
- changed color of dropdown arrow to match background color
- custom code to automatically open the dropdown on page load: Leave header with sublinks and icons displayed by default
- changed hover and active link highlighting: Highlight the page on the header that you are currently viewing
1 Like
hey @brettjw thanks sharing! 2 quick questions:
- where exactly do you place the code? I have tried in the custom code block and the header of the page and it does not work
- Also, I can’t find the arrow styling options, would you mind let me know where to edit that?
thanks in advance!
the code goes inside Settings → Custom Code - > Code inside header
for the arrow styling, i believe it inherits the styling of the parent link text (which is blank in my example). but if you change the styling (reduce size) on a blank parent link text, it should reduce the size of the associated arrow as well
i would share my code but i’ve since changed it to actually include parent links/text because I have 3 different categories now, and all 3 open upon page load.
let me know if help and i can share
thanks for the help! it worked!
I just had to change a few lines of code with the help of chatgpt, thanks!
1 Like