Twitter Bootstrap Question posted in

Why a header become transparent if it has a background color in html?-Twitter bootstrap

I am trying to design a web page similar to gmail. I have a header that has a background color, but if I scroll the content of the body of the page are visible.

Without scroll:

enter image description here

when scrolling I get the following:

enter image description here

Could someone help me find out why this happens?

Important: I am not the author of the design of the email section

Regards

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--  This file has been downloaded from bootdey.com    @bootdey on twitter -->
    <!--  All snippets are MIT license http://bootdey.com/license -->
    <title>bs4 beta email inbox - Bootdey.com</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{
background:#eee   
}


header {
    position: fixed;
        width:100%; 
        overflow:hidden; 
        background: royalblue;
        margin-bottom:20px;

    }
    
    .wrapper {
        width:95%; 
        max-width:1000px; 
        margin:auto; 
        overflow:hidden; 
       

    }

    header .logo {
        line-height:140px;
        display:inline-block;

    }
    
    header nav {
        float:right;
        line-height:140px;

    }
    
    header nav a {
        
        display:inline-block;
        color:#fff;
        text-decoration:none;
        padding:10px 20px;
        line-height:normal;
        font-size:20px;
        font-weight:bold;
        -webkit-transition:all 500ms ease;
        -o-transition:all 500ms ease;
        transition:all 500ms ease;

    }
    
    header nav a:hover {
        background:#7D878E;
        border-radius:50px;
    }


    .container{
        padding-top: 200px;

    }


.email-app {
    display: flex;
    flex-direction: row;
    background: #fff;
    border: 1px solid #e1e6ef;
}

.email-app nav {
    flex: 0 0 200px;
    padding: 1rem;
    border-right: 1px solid #e1e6ef;
}

.email-app nav .btn-block {
    margin-bottom: 15px;
}

.email-app nav .nav {
    flex-direction: column;
}

.email-app nav .nav .nav-item {
    position: relative;
}

.email-app nav .nav .nav-item .nav-link,
.email-app nav .nav .nav-item .navbar .dropdown-toggle,
.navbar .email-app nav .nav .nav-item .dropdown-toggle {
    color: #151b1e;
    border-bottom: 1px solid #e1e6ef;
}

.email-app nav .nav .nav-item .nav-link i,
.email-app nav .nav .nav-item .navbar .dropdown-toggle i,
.navbar .email-app nav .nav .nav-item .dropdown-toggle i {
    width: 20px;
    margin: 0 10px 0 0;
    font-size: 14px;
    text-align: center;
}

.email-app nav .nav .nav-item .nav-link .badge,
.email-app nav .nav .nav-item .navbar .dropdown-toggle .badge,
.navbar .email-app nav .nav .nav-item .dropdown-toggle .badge {
    float: right;
    margin-top: 4px;
    margin-left: 10px;
}

.email-app main {
    min-width: 0;
    flex: 1;
    padding: 1rem;
}

.email-app .inbox .toolbar {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e1e6ef;
}

.email-app .inbox .messages {
    padding: 0;
    list-style: none;
}

.email-app .inbox .message {
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
    cursor: pointer;
    border-bottom: 1px solid #e1e6ef;
}

.email-app .inbox .message:hover {
    background: #f9f9fa;
}

.email-app .inbox .message .actions {
    position: absolute;
    left: 0;
    display: flex;
    flex-direction: column;
}

.email-app .inbox .message .actions .action {
    width: 2rem;
    margin-bottom: 0.5rem;
    color: #c0cadd;
    text-align: center;
}

.email-app .inbox .message a {
    color: #000;
}

.email-app .inbox .message a:hover {
    text-decoration: none;
}

.email-app .inbox .message.unread .header,
.email-app .inbox .message.unread .title {
    font-weight: bold;
}

.email-app .inbox .message .header {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.email-app .inbox .message .header .date {
    margin-left: auto;
}

.email-app .inbox .message .title {
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-app .inbox .message .description {
    font-size: 12px;
}

.email-app .message .toolbar {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e1e6ef;
}

.email-app .message .details .title {
    padding: 1rem 0;
    font-weight: bold;
}

.email-app .message .details .header {
    display: flex;
    padding: 1rem 0;
    margin: 1rem 0;
    border-top: 1px solid #e1e6ef;
    border-bottom: 1px solid #e1e6ef;
}

.email-app .message .details .header .avatar {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
}

.email-app .message .details .header .from {
    font-size: 12px;
    color: #9faecb;
    align-self: center;
}

.email-app .message .details .header .from span {
    display: block;
    font-weight: bold;
}

.email-app .message .details .header .date {
    margin-left: auto;
}

.email-app .message .details .attachments {
    padding: 1rem 0;
    margin-bottom: 1rem;
    border-top: 3px solid #f9f9fa;
    border-bottom: 3px solid #f9f9fa;
}

.email-app .message .details .attachments .attachment {
    display: flex;
    margin: 0.5rem 0;
    font-size: 12px;
    align-self: center;
}

.email-app .message .details .attachments .attachment .badge {
    margin: 0 0.5rem;
    line-height: inherit;
}

.email-app .message .details .attachments .attachment .menu {
    margin-left: auto;
}

.email-app .message .details .attachments .attachment .menu a {
    padding: 0 0.5rem;
    font-size: 14px;
    color: #e1e6ef;
}

@media (max-width: 767px) {
    .email-app {
        flex-direction: column;
    }
    .email-app nav {
        flex: 0 0 100%;
    }
}

@media (max-width: 575px) {
    .email-app .message .header {
        flex-flow: row wrap;
    }
    .email-app .message .header .date {
        flex: 0 0 100%;
    }
}
    </style>
</head>
<body>

    <header>
        <div class="wrapper">
            <div class="logo">
                Logo
            </div>
            
            <nav>
                <a href="#">item 1</a>
                <a href="#">item 2</a>
                <a href="#">item 3</a>
            </nav>
        </div>
    </header>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container bootdey">
<div class="email-app mb-4">
    <nav>
        <a href="page-inbox-compose.html" class="btn btn-danger btn-block">New Email</a>
        <ul class="nav">
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-star"></i> Stared</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-rocket"></i> Sent</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-trash-o"></i> Trash</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-bookmark"></i> Important</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-danger">4</span></a>
            </li>
        </ul>
    </nav>
    <main class="inbox">
        <div class="toolbar">
            <div class="btn-group">
                <button type="button" class="btn btn-light">
                    <span class="fa fa-envelope"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-star"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-star-o"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-bookmark-o"></span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-light">
                    <span class="fa fa-mail-reply"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-mail-reply-all"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-mail-forward"></span>
                </button>
            </div>
            <button type="button" class="btn btn-light">
                <span class="fa fa-trash-o"></span>
            </button>
            <div class="btn-group">
                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                    <span class="fa fa-tags"></span>
                    <span class="caret"></span>
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">add label <span class="badge badge-danger"> Home</span></a>
                    <a class="dropdown-item" href="#">add label <span class="badge badge-info"> Job</span></a>
                    <a class="dropdown-item" href="#">add label <span class="badge badge-success"> Clients</span></a>
                    <a class="dropdown-item" href="#">add label <span class="badge badge-warning"> News</span></a>
                </div>
            </div>
            <div class="btn-group float-right">
                <button type="button" class="btn btn-light">
                    <span class="fa fa-chevron-left"></span>
                </button>
                <button type="button" class="btn btn-light">
                    <span class="fa fa-chevron-right"></span>
                </button>
            </div>
        </div>

        <ul class="messages">
            <li class="message unread">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">
                        <span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">
                        <span class="fa fa-paper-clip"></span> Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message unread">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>

                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message unread">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
            <li class="message">
                <a href="#">
                    <div class="actions">
                        <span class="action"><i class="fa fa-square-o"></i></span>
                        <span class="action"><i class="fa fa-star-o"></i></span>
                    </div>
                    <div class="header">
                        <span class="from">Lukasz Holeczek</span>
                        <span class="date">Today, 3:47 PM</span>
                    </div>
                    <div class="title">
                        Lorem ipsum dolor sit amet.
                    </div>
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                    </div>
                </a>
            </li>
        </ul>
    </main>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script type="text/javascript">
    
</script>
</body>
</html>
Tags:

2

Answers


  1. 0

    Maybe it’s not transparent but just behind of the page body.
    Try to define a z-index (css property) in your header in order to bring it to front.

    Login or Signup to reply.
  2. 0

    The content is appearing above the header, rather than being seen through it. To fix this, you’ll need to make the header appear above the content. The easiest way to do this is through the z-index css property.

    You could make this fix by increasing the z-index of the header by changing

        header {
        position: fixed;
        width: 100%; 
        overflow: hidden; 
        background: royalblue;
        margin-bottom: 20px;
    }

    to

        header {
        position: fixed;
        width: 100%; 
        overflow: hidden; 
        background: royalblue;
        margin-bottom: 20px;
        z-index: 1;
    }

    in your code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search