# Add the CSS code

{% embed url="<https://youtu.be/Ytz7p4Kedws?t=221>" %}

## Copy the CSS Code

Simply copy this CSS code :

```css
/** HEADER **/
 .loops-header-blurb .et_pb_blurb_container {
     padding-left: 0px;
}
 .loops-header-infos .et_pb_blurb .et_pb_blurb_content, .loops-header-infos .et_pb_blurb {
     width: max-content;
     margin-left: 0px !important;
}
 .loops-header-infos {
     display: flex;
     align-items: center;
     gap: 50px;
}
.loops-header-infos .et_pb_main_blurb_image{
    vertical-align: middle;
}
 .loops-bottom-header-7 .et_pb_menu__search-container {
     height: max-content !important;
}
 @media screen and (max-width: 980px) {
     .loops-header-style-16 .et_pb_column_1_4, .loops-header-style-17 .et_pb_column_1_4, .loops-header-style-18 .et_pb_column_1_4 {
         display: none;
    }
}
/** MENU **/
.et_pb_menu--without-logo .et_pb_menu__logo-wrap{
    display:none;
}
.et_mobile_menu {
   overflow: scroll !important;
   max-height: 84vh;
}
 .et_pb_menu.et_pb_bg_layout_dark .et_pb_menu__search-input {
     color: white;
}
 .mobile_nav.opened .mobile_menu_bar:before {
     content: "\4d";
}
 nav .menu-item-has-children>a:first-child:after {
     -webkit-text-fill-color: initial;
}
 nav .menu-item.current-menu-item>a {
     background: none !important;
     -webkit-text-fill-color: unset !important;
}
/* SUB MENU STYLE */
 nav .sub-menu li.menu-item {
     border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
 nav .sub-menu, .et_mobile_menu {
     border-top: none !important;
     box-shadow: 0px 5px 40px #0000002b !important;
     padding: 0px !important;
     border-radius: 5px;
}
 .et_mobile_menu {
     padding: 5% !important;
}
 .et_mobile_menu .menu-item-has-children>a {
     background-color: unset;
}
 nav .sub-menu:after {
     content: '';
     display: block;
     position: absolute;
     left: 11%;
     top: -23px;
     width: 0;
     height: 0;
     border-top: 12px solid transparent;
     border-right: 12px solid transparent;
     border-bottom: 12px solid #ffffff;
     border-left: 12px solid transparent;
     z-index: 1;
}
 nav .sub-menu li {
     width: 100%;
}
 nav .sub-menu li a {
     width: fit-content !important;
     padding: 14px 24px !important;
}
 nav .sub-menu li {
     transition: all 400ms ease;
     padding: 0px !important;
}
 nav .sub-menu li a:before {
     transition: all 200ms ease;
     content: '';
     width: 0px;
     background: #564cff;
     height: 40px;
     position: absolute;
     left: 0px;
     border-radius: 0px 5px 5px 0px;
     top: 50%;
     transform: translateY(-50%);
}
 nav .sub-menu li:hover a:before {
     width: 4px;
}
 nav .sub-menu li:hover {
     background-color: rgba(0, 0, 0, .03);
}
 nav .sub-menu li a:hover {
     background-color: unset;
}
 .et_pb_menu.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>ul {
     top: calc(170% - 1px);
}
/* BOTTOM HEADER STYLE 15 HOVER ANIMATION */
 @media screen and (min-width: 980px) {
     .loops-menu-hover-animation {
         padding: 0 20px;
         display: flex;
         height: -webkit-fill-available 
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container {
         height: -webkit-fill-available;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container li.menu-item {
         margin-top: 0px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container li.menu-item a {
         display: flex;
         align-items: center;
         padding: 0 8px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.current-menu-item>a:before, .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.menu-item>a:before {
         content: '';
         background: linear-gradient(#564cff, #7870ff);
         height: 100%;
         width: 100%;
         box-shadow: -5px 1px 5px rgb(0 0 0 / 62%);
         transform: translateX(0) scale(1.08);
         position: absolute;
         left: -20px;
         top: 0;
         opacity: 0;
         z-index: -1;
         transition: left 400ms ease, opacity 200ms ease;
         border-bottom-right-radius: 5px;
         border-top-right-radius: 5px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.current-menu-item>a:before, .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.menu-item:hover>a:before {
         left: 0px;
         opacity: 1;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .menu-item-has-children>a:first-child:after {
         position: relative;
    }
}
```

## Paste the CSS code

{% hint style="info" %}
**Good to know:** If you already have a child theme installed, you can paste the CSS code directly into the style.css file of the child theme
{% endhint %}

Go to the back office of your site then in Divi >> Themes Options, at the bottom of the page you will find a "custom CSS" field, paste the code here.

That's it, I told you it's easy :tada:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://contact-22.gitbook.io/loops-headers/installation/add-the-css-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.