Animated Responsive Navbar with CSS - Plus Other Useful Tricks
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they were following when they hit problems with flexbox margin auto, SVG icon styling, or sidebar navbar layouts.
Recommended by 0 people across 0 different months, 2020 to 2022.
What it is
A Fireship beginner tutorial that builds a responsive, animated navigation bar with plain CSS and HTML. It covers flexbox layout, hover animations, duotone SVG icons, CSS variables, and a few other styling tricks, with source code on GitHub.
What people said
Cites ScottexBoy · 2020-07 · Stack Overflow · on “Not able to place elements properly after dividing them in components (Angular)”
I'm kinda noob on the css layout. So i had a sidebar and the app-root all placed in the index.html file as you can see in the master branch of the repository: [LINK] It wasnt perfect yet but it was something: [LINK] The navbar animations were fine and the main content moved to the right when the navbar was hovered and opened. So then i tried to move everything in their correct components and i placed the #wrapper #left #right styling in the app.component.css to apply to in the selectors of app.component.html. But now is more broken than ever: [LINK] [LINK] I don't understand why other than the components beying displayed one above the other, the navbar has also missing the background color a
Cites Krishna Noutiyal · 2020-08 · Stack Overflow · on “SVG file is not showing in Chrome browser”
I don't Know much about SVG stuff and recently I come up with this problem the SVG files are showing when we paste its code in the HTML file I have seen many youtube videos in which they use <img> tag to emmet the SVG file in the browser but I don't know is browser a problem for this or not but when I try to emmet the SVG file using <img> tag I just don't show up on the page but works when pastes its code. Can anyone tell me ho can I emmet the SVG file to my chrome browser using <img> or any other way but not pasting the whole SVG code in the HTML file because it is annoying and also not looks pretty good. Edit:- currently, I am making a navbar model which is in the left-hand side I referred
Cites double_four_time · 2020-12 · Stack Overflow · on “Setting margin to auto in a flexbox”
I was following along the tutorial on youtube link [this video] and I got stuck in this part that's using margin-top: auto in a flexbox to push the last child to bottom. Can you please point out what's not working here? .navbar { width: 5rem; height: 100vh; position: fixed; background-color: var(--bg-primary); } .navbar-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; } .nav-item:last-child { margin-top: auto; } <nav class="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="" > <span class="link-text">Cats</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="" > <span class="link-text">Cats</span>
Cites Dan-codes-frontend · 2022-08 · Stack Overflow · on “SVG multiple paths and <g> tags for CSS manipulation”
I've run into a problem while following a guide for responsive CSS navbars. I was trying to replicate what the Fireship creator was doing here (timestamped video: [this video] ). Tried replacing the SVGs he was using in the HTML file with other FontAwesome ones and I realized they are far, far less detailed than his. Specifically he has multiple tags and paths and classes he can manipulate using CSS. How did he obtain such detailed SVGs? Did he edit them in Inkscape/Illustrator and redrew them or is there a way to unpack SVGs in this way? His SVGs: <li class="nav-item"> <a href=" [LINK] " class="nav-link"> <svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="cat" role="img" xmln