Watch the Responsive CSS Navbar episode on on youtube
fireship-io / 222-responsive-icon-nav-css Goto Github PK
View Code? Open in Web Editor NEWA Simple Responsive Animated CSS Icon Navbar
A Simple Responsive Animated CSS Icon Navbar
Watch the Responsive CSS Navbar episode on on youtube
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?
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;
}}
svg for theme and toggle theme doesnt appear and work
The aforementioned issue is due to using display: none
on logo link-text
element.
I have already solved this problem and created proposed PR.
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!
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
222-responsive-icon-nav-css/public/style.css
Line 172 in 932ba47
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?
hi i open this project and on mobile navbar dont work
i cahnge with dev tool to mobile and its look not responsive..
.navbar { position: fixed; background-color: var(--bg-primary); transition: width 600ms ease; overflow: scroll; }
Change overflow to "hidden"
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.