Kevin Powell - Community•7mo ago

Navbar going transparent in mobile view

I have this navbar which gets a transparent background for some reason in mobile view. Here is the codepen. https://codepen.io/Aman-sghh/pen/bGyeZxQ You can see how it is transparent in the image.

Aman

CodePen

Nav

...

3 Replies

MarkBoots•7mo ago

the part you shared seems to be okay. there is a background on it all through. Maybe something else is conflicting with it. so please add some of the content (as shown in the screenshot)

AmanOP•7mo ago

I will share one page. That is flow.html

message.txt

AmanOP•7mo ago

and flow.css

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

#addFlowBtn {
    transition: transform 0.3s;
}

#addFlowBtn:hover {
    transform: scale(1.1);
}

.fade-in {
    animation: fadeIn 0.7s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.modal-content {
    background-color: #fefefe;
    margin: 20px auto;
    border: 1px solid #888;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 80vh;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

.card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s ease, transform 0.5s ease;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

#addFlowBtn {
    transition: transform 0.3s;
}

#addFlowBtn:hover {
    transform: scale(1.1);
}

.fade-in {
    animation: fadeIn 0.7s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.modal-content {
    background-color: #fefefe;
    margin: 20px auto;
    border: 1px solid #888;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 80vh;
}

Actually, its transparent on everypage.

Gaming

Programming

Navbar going transparent in mobile view