Submitted over 3 years ago

Agency Page Using Grid and Flexbox

Taariq Mamun•50

@taariqamozilla

Preview site View code

This is a solution for...Agency landing page

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

Can someone please help with the mobile dropdown menu. I could create a fixed overlay for the mobile menu but had trouble with the shape and way the overlay was supposed to be placed.

Community feedback

BHARAT•290

@nicobreinsPosted over 3 years ago

Use pseudo element like ::before to add top triangle:

modified your css below:

#dropdown{
        position: fixed;
        z-index: 100;
        top: 4rem;
        right: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 1);
        margin: 1.5rem;
    }

    #dropdown::before{
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        background: transparent;
        border-left: 20px solid transparent;
        border-right: 30px solid #fff;
        border-top: 35px solid transparent;
        right: 0;
        top: -30px;
    }

[Res for Pseudo elements] (https://css-tricks.com/pseudo-element-roundup/) [Res for making triangles like this] (https://css-tricks.com/snippets/css/css-triangle/)

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord