jekyll-theme-prologue
jekyll-theme-prologue copied to clipboard
Modify Nav Bar (Avatar, Style, and Color)
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.
P.S Can you update font awesome to version 5? I tried it but it seems to mess up the others. Thanks.
@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.