fireship-io / 222-responsive-icon-nav-css

A Simple Responsive Animated CSS Icon Navbar

A Responsive Animated CSS Icon Navbar

Watch the Responsive CSS Navbar episode on on youtube

222-responsive-icon-nav-css's Issues

Themeing Option Fix

Awesome menu! Everything worked great except for themes, because local storage is never set, so it's always empty. If you check for local storage first, then set it to a default, it works like champ:

const themeMap = {
    dark: "light",
    light: "solar",
    solar: "dark"
};

if (localStorage.theme) {
    const theme = localStorage.getItem("theme");
    const bodyClass = document.body.classList;
    theme && bodyClass.add(theme);
    function toggleTheme() {
        const current = localStorage.getItem("theme");
        const next = themeMap[current];

        bodyClass.replace(current, next);
        localStorage.setItem("theme", next);
    }
} else {
    localStorage.setItem("theme", "light");
}

document.getElementById("themeButton").onclick = toggleTheme;

Thanks for the great videos!

navbar on phone dont work

hi i open this project and on mobile navbar dont work
i cahnge with dev tool to mobile and its look not responsive..

Strange transition on Chrome

This works beautifully on FireFox but on Google Chrome when you unhover a link it first transitions to the black base color of the svg icon and then snaps to the gray color. This also happens when you first hover the navbar, all the icons start in there base black color and then snap to gray.

Any ideas on how to make it compatible with Chrome?

Logo SVG temporarily appears out of the navbar while hovering over the navbar

The aforementioned issue is due to using display: none on logo link-text element.
I have already solved this problem and created proposed PR.

CSS - Nav Scroll showing

.navbar { position: fixed; background-color: var(--bg-primary); transition: width 600ms ease; overflow: scroll; }

Change overflow to "hidden"

Odd Spaced Logo

222-responsive-icon-nav-css/public/style.css

Line 172 in 932ba47

margin-left: 11rem;

should this be 1 or 2rem?

This is the screenshot of 11rem

vs 1rem below

Changing the Icon

I've been trying to figure out how to change the icons and simply replacing fa-cat or the data-icon, anyway i can customize it to the icons i want?

Scrolling bas is in the left side of the content and which is not working

css: .link-text being displayed in small screen

because the display property is set to block on hover for .link-text, on small screen it results in a weird transition.
Set it as :
@media (max-width:600px){
.navbar:hover {
width: 100vw;
}
.navbar:hover .link-text {
display: none;
}}

theme not work

svg for theme and toggle theme doesnt appear and work

css: .nav-item:last-child

cannot see the last icon in Chrome but i see it on my IDE

The overflow:scroll still in master code after fix by user

Main content being covered when navbar expands onHover. Working on fix, will share when complete

When the Navbar is hovered over in the large screen view, the main content gets covered, which is pretty unaesthetic. I'm working on a fix where not only does the sidebar transition and expand. The main content also shrinks with it. Very similar to this effect in the React AntDesign sider DEMO

no theme

when I run the code there is no icon on themify and clicking it did nothing, I added:
let fh = localStorage.setItem('theme', 'dark')
in theme.js on line 5 and now it works.