Modify Nav Bar (Avatar, Style, and Color)

[jordytrilaksono]

Hi, I'm trying to make a personal page and frankly I know nothing about web development. Your awesome theme helped me a lot. Thanks.

I noticed when I minimize my window, the style of nav bar is changed. I prefer this minimized style so I wonder if I can make that style to be the main style. Also, can you tell me how to change nav bar's color scheme? For example instead of current dark scheme, I want to change it to blue. Can you tell me how to do it?

Let's say that I can make the minimized style to be the main style. Can I center the avatar and make the frame to be round not square? It would be awesome if I can make it a little bit bigger too.

I'm looking forward for your reply. Thank you. Best Regards.

[jordytrilaksono]

P.S Can you update font awesome to version 5? I tried it but it seems to mess up the others. Thanks.

[Drakmyth]

@jordytrilaksono You can change the styling of the avatar and sidebar colors by adding rules to the /assets/css/main.scss file. Use your browsers dev tools to inspect the element and see the current rules in place, specifically you're looking for rules related to the #header and #nav classes. For the avatar, explore the #avatar48 class.

I haven't had much luck customizing the style breakpoints without modifying the template itself. But if you want to go that route you'll find them defined in the /_sass/Jekyll-theme-prologue.scss file.

Updating Font Awesome to version 5 was a little bit involved. I have a pull request open to make this change and am just waiting on @chrisbobbe to review it.