CODEWITHSUNDEEP
htmlcss
Freezy
Freezy

Reputation: 146

change boostrap dropdown design

I'm using bootstrap v4.5.0 and I am currently working on a dropdown.

I try to change a little the design of the dropdown, but there is a problem. When I click, the dropdown appears too much down, you can see that there is a loot of space (on the bottom).

Why is that?

Btw: use 'full page' on the snippet code and also i don't know why on the snippet the background-color of the dropdown-menu is not applied, on my localhost is working.

@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.box-account {
    margin-top: 10px;
    background-color: var(--main-color);
    border-radius: 3px;
    width: 150px;
    height: 40px;
    /*transition: 0.3s ease-in-out;*/
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.box-account-name {
    text-align: left;
    padding-left: 20px;
    padding-top: 2.5px;
    font-size: 20px;
}

/*
.box-account-name i {
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 15px;
}
*/

.nav-account-avatar-display {
    width: 32px;
    height: 32px;
    float: right;
    margin-top: 3.5px;
    margin-right: 10px;
    border-radius: 50%;
}

.nav-account a {
    color: #D5D5D5;
}

.box-account:hover {
    background-color: #3F5160;
    /*transform: translateY(-10%);*/
}


.dropdown-menu {
    background-color: #4D6275;
    border-radius: 3px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.dropdown-item:hover {
    background-color: #3F5160;
    color: #D5D5D5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
        
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">

<!-- Load sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

<a href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="box-account">
        <div class="box-account-name">
            <span class="name-account-nav">Name</span>
            <img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
        </div>
    </div>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Action 3</a>
</div>
                    
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Upvotes: 0

Views: 28

Answers (1)

Vladislav Akhmetvaliyev
Vladislav Akhmetvaliyev

Reputation: 755

Just add display: block to the menu expander. This will fix the vertical offset. Still, 5px left offset will be applied, you can either try to figure out what forces js to think there is a 5px overflow on the left or you can just set margin-left: -5px to .dropdown-menu. This will work in case it's not overwritten by imported boostrap.css

@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Signika:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

:root {
    --main-color: #4D6275;
    --second-color: #3F5060;

    --body-bg: #2E3841;
    --box-bg: #272F37;

    --text-color: #D5D5D5;
    --grey-color: #B2B2B2;
    --simple-color: #C3C3C3;

    --content-height: 92px;
    --space-top: 30px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--body-bg);
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

button:focus {
    outline: none;
}

.box-account {
    margin-top: 10px;
    background-color: var(--main-color);
    border-radius: 3px;
    width: 150px;
    height: 40px;
    /*transition: 0.3s ease-in-out;*/
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.box-account-name {
    text-align: left;
    padding-left: 20px;
    padding-top: 2.5px;
    font-size: 20px;
}

/*
.box-account-name i {
    float: right;
    margin-top: 8px;
    margin-right: 10px;
    font-size: 15px;
}
*/

.nav-account-avatar-display {
    width: 32px;
    height: 32px;
    float: right;
    margin-top: 3.5px;
    margin-right: 10px;
    border-radius: 50%;
}

.nav-account a {
    color: #D5D5D5;
}

.box-account:hover {
    background-color: #3F5160;
    /*transform: translateY(-10%);*/
}

.menu-button {
  display: block;
}

.dropdown-menu {
    background-color: #4D6275;
    border-radius: 3px;
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}

.dropdown-item:hover {
    background-color: #3F5160;
    color: #D5D5D5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css?">
        
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">

<!-- Load sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

<a href="#" role="button" class="menu-button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <div class="box-account">
        <div class="box-account-name">
            <span class="name-account-nav">Name</span>
            <img src="https://i.pinimg.com/474x/02/3e/eb/023eebc4bcee84dda420da10d3fe1c91.jpg" class="nav-account-avatar-display">
        </div>
    </div>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action 1</a>
    <a class="dropdown-item" href="#">Action 2</a>
    <a class="dropdown-item" href="#">Action 3</a>
</div>
                    
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Upvotes: 1

Related Questions