https://github.com/devmor-j/fm-intro-section-with-dropdown-navigation
https://github.com/devmor-j/fm-intro-section-with-dropdown-navigation
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devmor-j/fm-intro-section-with-dropdown-navigation
- Owner: devmor-j
- Created: 2022-05-19T17:55:27.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-22T07:57:01.000Z (about 4 years ago)
- Last Synced: 2025-07-29T04:05:57.272Z (10 months ago)
- Language: HTML
- Homepage: https://devmor-j.github.io/fm-intro-section-with-dropdown-navigation/
- Size: 833 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Intro section with dropdown navigation solution
This is my solution to the [Intro section with dropdown navigation challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
- View the optimal layout for the content depending on their device's screen size
- See hover states for all interactive elements on the page
### Screenshot
Desktop 1536px
Mobile 375px iPhone 5/SE
### Links
- Solution URL: [Github repository](https://github.com/devmor-j/fm-intro-section-with-dropdown-navigation)
- Live Site URL: [Hosted on Github Pages](https://devmor-j.github.io/fm-intro-section-with-dropdown-navigation/)
## My process
### Built with
- Semantic HTML5 markup
- Mobile-first workflow
- [Bootstrap (v5.x)](https://getbootstrap.com/) - Build fast, responsive sites with Bootstrap
- [SASS](https://sass-lang.com) - CSS with superpowers
- [Vite.js](https://vitejs.dev/) - Next Generation Frontend Tooling
- [Minified html](https://github.com/vbenjs/vite-plugin-html) and [compressed png](https://github.com/vbenjs/vite-plugin-imagemin) pipeline
### What I learned
Using Bootstrap might be hard specially when you want more flexibility and customization! I would probably switch back to my Tailwind setup for css styling.
Even changing color is a pain :| not to mention responsive classes and hover states :)
One hack that I have to do was changing default arrow icons on dropdown menu. assume you have something like this:
```html
Features
```
In order to use your own arrow shape for dropdown menus, we have to override some bootstrap classes that will reset bootstrap default icons. after that make sure layout still looks good and then bring in your own:
```scss
// first you have to hide default arrows by overriding this calss
.dropdown-toggle::after {
color: transparent;
display: none;
}
// now style micro layout change
// depends on your styles
// but make sure you don't break something
.dropdown-toggle {
display: flex;
flex-direction: row-reverse;
justify-content: start;
gap: 0.75rem;
}
// add your own icon for 'closed state' (down arrow)
.dropdown-toggle::before {
margin-top: -0.125rem;
content: url("/images/icon-arrow-down.svg");
// please note that 'background-image' won't work here
// instead use 'content' property
}
// everytime user clicks on dropdown menu,
// change arrow icon to 'opened state' (up arrow)
.dropdown-toggle:focus::before {
content: url("/images/icon-arrow-up.svg");
}
```
As long as I know there are no hacks in [Tailwind](tailwindcss.com/) classes are atomic and well-named. Also these bootstrap hacks make project somehow hard to maintain. Still there might be some better solutions which I'm not aware so don't be discouraged to find better approaches when using Boostrap.
## Author
- Frontend Mentor - [@devmor-j](https://www.frontendmentor.io/profile/devmor-j)