(48) 99997-9868 carcasa@carcasa.com.br

Estilos CSS para o menu móvel do Divi

set 21, 2020 | DIVI

Um dos desejos mais comuns de cada usuário Divi é sempre ter estilos de design diferentes para o menu, principalmente para a navegação do celular.

Por isso pensei que a criação de uma coleção de estilos para customizar o Menu Mobile do Divi poderia ser útil para todos aqueles usuários que desejam um novo visual para o menu, mas têm pouco ou nenhum conhecimento do código.

Isso não só permitirá que você personalize o design do seu menu móvel, mas também tenha maior flexibilidade, pois os estilos são aplicados apenas à navegação móvel, então você pode usar com segurança o menu padrão para a navegação da área de trabalho e um dos estilos deste lista para celular.

Nota : Peço desculpas antecipadamente se meu inglês houver alguns erros, ainda tenho que melhorar. ?

Antes de começar..

Para fazer com que todos os layouts que você vê neste tutorial funcionem bem, você precisa adicionar ao seu site Divi o código JS que você pode encontrar dentro do arquivo que você pode baixar clicando no botão abaixo. Você deve adicionar este código JS no campo “ Adicionar código ao do seu blog ” que você pode encontrar no painel de opções.

Divi> Opções de tema> Integrações>
Adicionar código ao do seu blog.

Ao contrário da primeira versão deste post, nesta versão atualizada eu usei um código JS que permite que você tenha os itens do menu clicável pai. Com o código anterior não era.

Nota:  Se você também deseja adicionar ícones como nos exemplos neste tutorial, você precisará adicionar Font-Awesome ao seu site Divi. Mas é apenas uma opção, cada estilo funciona bem, mesmo sem Font-Awesome. 

1. Estilo Slide-In

Este estilo permite um menu flutuante com slide-in, muito semelhante ao menu slide-in do Divi, com a diferença que este estilo se aplica apenas à navegação móvel.

menu-mobile-style-1 mobile menu divi

 
Código CSS para este estilo
/**** Nesting Menu ****/

    /* when mobile menu is open, change hamburger icon to x icon */

    #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
        content: '\4d';
    }
    /* makes sub sub menu icon be right arrow instead of down arrow */

    #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
    #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
        content: '5';
    }
    /* - mobile menu toggling elements, injected via jQuery - */
    /* make menu list item be relative, to be able to position toggle within this item */

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
        position: relative;
    }
    /* the new toggle element, which is added via jQuery */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
        position: absolute;
        z-index: 1;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-radius: 50%;
        top: 5px;
        right: 30px;
        cursor: pointer;
        text-align: center;
    }
    /* the new toggle element when popped */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
        background-color: rgba(255,255,255, 0.2);
    }
    /* toggle icon */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
        font-family: "ETmodules" !important;
        font-weight: normal;
        font-style: normal;
        font-variant: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 36px;
        font-size: 24px;
        text-transform: none;
        speak: none;
        content: '\33';
        color: #da1755;
    }
    /* toggle icon when triggered */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
        content: '\32';
    }
    /* hide sub menus by default */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
        display: none !important;
        padding-left: 0;
    }
    /* show sub menu when triggered via jQuery toggle, and add slight bg color */

    #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
        display: block !important;
    }
    /* remove sub menu list item left padding, since padding will be on anchors */

    #main-header #mobile_menu.et_mobile_menu li li {
        padding-left: 0;
    }
    /* adjust mobile menu anchors side paddings */

    #main-header #mobile_menu.et_mobile_menu li a {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* indent sub sub menus further */

    #main-header #mobile_menu.et_mobile_menu li li li a {
        padding-left: 60px;
        padding-right: 20px;
    }

    #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
        background-color: transparent;
        font-weight: inherit;
    }
    /* make the current page's mobile menu link be different */

    #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
        font-weight: bolder;
    }

    /****** Code Style: Menu Slide-In ******/

    /* Font Awesome */
    .fa {
        margin-right: 15px ;
      }

    @media only screen and (max-width: 980px){
    #mobile_menu {
        display: block !important;
        min-height: 100vh;
        height: 100%;
        top: 0;
        right: 0;
        position: fixed;
        z-index: 9998;
        overflow: scroll;
        border-top: none;
        padding-top: 60px !important;
    }

    .et_mobile_menu li a {
        color: #da1755 !important;
        width: 100%;
        float: left;
        text-align: left;
        border-bottom: 1px solid #ddd;
        margin: 5px;
        transition: .2s;
        text-transform: uppercase;
    }
    .mobile_nav ul#mobile_menu .current_page_item > a {
        color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
    }

    .mobile_nav.closed #mobile_menu {
        background: rgba(51,51,51,0.9) !important;
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
        background: rgba(51,51,51,0.9) !important;
    }

    .mobile_nav.opened #mobile_menu {
        background: rgba(27,29,30,0.98) !important;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
        -webkit-overflow-scrolling: touch;
        -webkit-transition: -webkit-transform 0.4s 0s;
        -moz-transition: -moz-transform 0.4s 0s;
        transition: transform 0.4s 0s;
    }

    #main-header .container.clearfix.et_menu_container {
        width: 100%;
    }

    .mobile_menu_bar:before {
        color: #1b1d1e !important;
    }
    .mobile_nav.opened .mobile_menu_bar:before {
        content: '\4d';
        color: #fff !important;
        z-index: 9999;
    }
    }

    @media only screen and  (max-width: 980px) {
      .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {    
        z-index: 9999;
      }
      #et-top-navigation {    
        padding-right: 5px;
      }
    }

    @media only screen and (min-width: 481px)  {
      #mobile_menu {    
        width: 340px;    
        margin-left: calc(100% - 340px);
      }
    }
    @media only screen and (max-width: 480px)  {
      #mobile_menu {    
        width: 290px;    
        margin-left: calc(100% - 290px);
      }
    }

 

2. Estilo de gradiente deslizante

Este estilo é semelhante ao anterior, mas como você pode ver, apliquei um fundo gradiente e apontei o link atual com um fundo transparente e com o preenchimento à esquerda. Para personalizar a cor de fundo, basta substituir as duas cores entre os colchetes e você pode decidir a direção do gradiente substituindo superior por: direita, esquerda ou inferior. Claro, você pode obter mais efeitos de gradiente, mas eu preferia uma solução mais simples para personalizar também para iniciantes.

menu-mobile-style-2 mobile menu divi

Código CSS para este estilo

/* Nesting Menu */
/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: ‘5’;
}
/* – mobile menu toggling elements, injected via jQuery – */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 28px;
right: 0px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: “ETmodules” !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: ‘\33’;
color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: ‘\32’;
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page’s mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
margin-right: 15px ;
}

@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 60px !important;
}
.et_mobile_menu li:nth-child(1) {
padding-top: 20px;
}
.et_mobile_menu li a {
color: #fff !important;
width: 100%;
float: left;
border: none !important;
text-align: left;
margin: 5px 10px;
transition: .2s;
text-transform: uppercase;
font-size: 1.4em !important;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding-left: 20px;
}

.mobile_nav.closed #mobile_menu {
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}

.mobile_nav.opened #mobile_menu {
background: -moz-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -webkit-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -o-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: -ms-linear-gradient(top, #62278d 0%, #2cc09b 100%);
background: linear-gradient(to bottom, #62278d 0%, #2cc09b 100%);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
width: 100%;
}

.mobile_menu_bar:before {
color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
z-index:9999;
color: #fff !important;
border: 1px solid #fff;
width: 30px;
height: 30px;
border-radius: 50%;
}
}

@media only screen and (max-width: 980px) {
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
z-index: 9999;
}
#et-top-navigation {
padding-right: 5px;
}
}

@media only screen and (min-width: 481px) {
#mobile_menu {
width: 340px;
margin-left: calc(100% – 340px);
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 290px;
margin-left: calc(100% – 290px);
}
}

3. Stile Full-Width

O estilo Full-Width, como o nome sugere, permite que você tenha um menu móvel que cobre a tela inteira. Neste exemplo, você pode ver o resultado final que pode ser personalizado em minutos.

divi do menu móvel

Código CSS para este estilo

/* Nesting Menu */
/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: ‘5’;
}
/* – mobile menu toggling elements, injected via jQuery – */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
background-color: rgba(255,255,255, 0.2);
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 35px;
right: 30px;
cursor: pointer;
text-align: center;
-webkit-box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
box-shadow: 0 2px 14px 0 rgba(0,0,0, .1);
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: “ETmodules” !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: ‘\33’;
color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: ‘\32’;
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}
/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page’s mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}

/****** Code Style: Menu Full-screen ******/

/* Font Awesome */
.fa {
margin: 10px ;
}

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header {
position: fixed;
}
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(10, 10, 10, 0.9) !important;
margin-left: -30px;
padding: 25% 0;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
text-align: center;
font-size: 1.55em;
border: 0;
padding: 5% 0;
text-transform: uppercase;
letter-spacing: 6px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
color: #5376F6;
background-color: rgba(255,255,255, 0.1);
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.05em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #999;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
z-index: 9999;
color: #fff;
}

4. Estilo Multicolor

O estilo Multicolor é um dos meus favoritos. Novamente a customização é realmente muito fácil, tudo o que você precisa fazer é substituir as cores de cada elemento, a parte inferior do código. Mas relaxe, adicionei um comentário no código para ajudá-lo a personalizar as cores facilmente.

menu-mobile-style-5 mobile menu divi

Código CSS para este estilo

/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: ‘5’;
}
/* – mobile menu toggling elements, injected via jQuery – */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
background: #fff;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 36px;
right: 80px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: “ETmodules” !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: ‘\33’;
color: #363636;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: ‘\32’;
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page’s mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}

/****** Code Style: Slide-in Gradient ******/

/* Font Awesome */
.fa {
margin-right: 15px ;
}

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top: 0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: center;
font-size: 1.6em;
border: 0;
padding: 45px 0;
text-transform: uppercase;
letter-spacing: 4px;
}

.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1em !important;
padding: 1em;
}
.et_mobile_menu li a:hover {
color: #363636;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
z-index: 9999;
color: #606060 !important;
top: -15px !important;
left: 27px !important;
transition: .15s;
}

/**__ The following code allows you to change the background of each individual item. All you need to do is change the hex code with the one that you prefer, and if your menu has more than 7 items, you must copy the piece of code that you see and change the number in the parenthesis in ascending order. Example: if your menu has 10 items, you will need to add more 3 snippets and change the number in the brackets with 8, 9, 10. __**/

.et_mobile_menu li:nth-child(1) {
background-color: #F0E8DA;
}

.et_mobile_menu li:nth-child(2) {
background-color: #F2D3DE ;
}

.et_mobile_menu li:nth-child(3) {
background-color: #E8B5C4;
}

.et_mobile_menu li:nth-child(4) {
background-color: #C98392;
}

.et_mobile_menu li:nth-child(5) {
background-color: #83B5B1;
}
.et_mobile_menu li:nth-child(6) {
background-color: #B2D9CF;
}
.et_mobile_menu li:nth-child(7) {
background-color: #92bdcf;
}

5. Estilo Multicolor com Ícone à esquerda e Texto alinhado à direita

Como você pode ver é muito parecido com o estilo anterior, a única customização que apliquei, movo os ícones à esquerda e alinhe o texto à direita.

menu-mobile-style-3 mobile menu divi

Código CSS para este estilo

/* Nesting Menu */
/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: ‘5’;
}
/* – mobile menu toggling elements, injected via jQuery – */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 70px;
right: 16px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: “ETmodules” !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: ‘\33’;
color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: ‘\32’;
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page’s mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}

/****** Code Style: Style Multicolor ******/

/* Font Awesome */
.fa {
position: absolute;
display: block;
}

@media screen and (max-width: 980px) {
.et_header_style_centered #main-header .mobile_nav {
background-color: transparent;
}
.mobile_nav.closed .select_page {
display: none;
}
.et-fixed-header#main-header {
background-color: transparent !important;
}
.et_header_style_centered #main-header {
position: fixed;
}
}
.et_mobile_menu {
top: 0;
left: 0;
position: fixed;
z-index: 9998;
overflow: scroll !important;
background-color: rgba(27, 29, 30, 0.95) !important;
margin-left: -30px;
padding-top: 0px;
height: 100%;
width: calc( 100% + 60px);
border-top: none;
}
.et_mobile_menu li a {
color: #fff;
text-align: right;
font-size: 1.6em;
border: 0;
padding: 45px 30px;
text-transform: uppercase;
letter-spacing: 4px;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #f9f9f9;
}
.mobile_nav ul#mobile_menu li ul li a {
font-size: 1.1em !important;
margin: auto;
padding-top: 0.2em;
}
.et_mobile_menu li a:hover {
color: #f9f9f9;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: ‘\4d’;
z-index: 9999;
font-size: 26px !important;
color: #333 !important;
top: -22px !important;
left: 32px !important;
transition: all .15s;
}

.et_mobile_menu li:nth-child(1) {
background-color: #42CAC6;
}

.et_mobile_menu li:nth-child(2) {
background-color: #4B9BCE ;
}

.et_mobile_menu li:nth-child(3) {
background-color: #4B7FB9;
}

.et_mobile_menu li:nth-child(4) {
background-color: #5E5493;
}

.et_mobile_menu li:nth-child(5) {
background-color: #5F4270;
}
.et_mobile_menu li:nth-child(6) {
background-color: #592877;
}
.et_mobile_menu li:nth-child(7) {
background-color: #066A91;
}

6. Estilo Windows Phone

Esse estilo é o que uso atualmente no meu site e é inspirado no design do novo Windows Phone. Uma dica para você é usar esse estilo para sites que possuem poucos itens no menu, pois com um menu extenso o resultado visual, mas também a experiência do usuário, podem não ser os melhores.

menu-mobile-style-6 mobile menu divi

Código CSS para este estilo

/* Nesting Menu */

/* when mobile menu is open, change hamburger icon to x icon */

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: ‘\4d’;
}
/* makes sub sub menu icon be right arrow instead of down arrow */

#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: ‘5’;
}
/* – mobile menu toggling elements, injected via jQuery – */
/* make menu list item be relative, to be able to position toggle within this item */

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 70px;
right: 16px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: “ETmodules” !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: ‘\33’;
color: #fff;
}
/* toggle icon when triggered */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: ‘\32’;
}
/* hide sub menus by default */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */

#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */

#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */

#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}

/* indent sub sub menus further */

#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}

#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page’s mobile menu link be different */

#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}

/****** Code Style: Style Windows Phone ******/

/* Font Awesome */
.fa {
margin: 10px ;
}
@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 80px !important;
}

.et_mobile_menu li a {
color: #fff !important;
width: 46%;
float: left;
text-align: center;
background-color: #a46497 !important;
padding: 11% 8%;
margin: 2%;
font-size: 1.2em;
}
.mobile_nav.closed #mobile_menu {
background: rgba(51,51,51,0.95) !important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
background: rgba(51,51,51,0.9) !important;
}

.mobile_nav.opened #mobile_menu {
background: rgba(51,51,51,0.95) !important;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}

#main-header .container.clearfix.et_menu_container {
width: 100%;
}

.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;
z-index: 9999;
color: #fff;
margin-right: 20px;
}
}

@media only screen and (max-width: 980px) {
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
z-index: 9999;
}
#et-top-navigation {
padding-right: 5px;
}
}

@media only screen and (min-width: 481px) {
#mobile_menu {
width: 430px;
margin-left: calc(100% – 430px);
}
}

@media only screen and (max-width: 480px) {
#mobile_menu {
width: 370px;
margin-left: calc(100% – 370px);
}
}

7. Estilo slide-in com imagem de fundo

Prometi que compartilharia outros estilos para o menu móvel, e aqui está este novo estilo adicionado aos anteriores, e isso permite que você tenha um menu com efeito de slide, mas com uma imagem de fundo. Deixe-me saber o que você acha nos comentários 😉

menu-mobile-style-7 mobile menu divi

Código CSS para este estilo
/* Nesting Menu */ /* when mobile menu is open, change hamburger icon to x icon */ #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before { content: ‘\4d’; } /* makes sub sub menu icon be right arrow instead of down arrow */ #top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after { content: ‘5’; } /* – mobile menu toggling elements, injected via jQuery – */ /* make menu list item be relative, to be able to position toggle within this item */ #main-header #mobile_menu.et_mobile_menu .menu-item-has-children { position: relative; } /* the new toggle element, which is added via jQuery */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle { position: absolute; z-index: 1; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; top: 10px; right: 35px; cursor: pointer; text-align: center; } /* the new toggle element when popped */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped { background-color: rgba(255,255,255, 0.2); } /* toggle icon */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before { font-family: “ETmodules” !important; font-weight: normal; font-style: normal; font-variant: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 36px; font-size: 24px; text-transform: none; speak: none; content: ‘\33’; color: #fff; } /* toggle icon when triggered */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before { content: ‘\32’; } /* hide sub menus by default */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu { display: none !important; padding-left: 0; } /* show sub menu when triggered via jQuery toggle, and add slight bg color */ #main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu { display: block !important; } /* remove sub menu list item left padding, since padding will be on anchors */ #main-header #mobile_menu.et_mobile_menu li li { padding-left: 0; } /* adjust mobile menu anchors side paddings */ #main-header #mobile_menu.et_mobile_menu li a { padding-left: 20px; padding-right: 20px; } /* indent sub sub menus further */ #main-header #mobile_menu.et_mobile_menu li li li a { padding-left: 60px; padding-right: 20px; } #main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a { background-color: transparent; font-weight: inherit; } /* make the current page’s mobile menu link be different */ #main-header #mobile_menu.et_mobile_menu li.current-menu-item > a { font-weight: bolder; } /****** Code Style: Menu slide-in with background image ******/ /* Font Awesome */ .fa { margin-right: 15px ; } @media only screen and (max-width: 980px){ #mobile_menu { display: block !important; min-height: 100vh; height: 100%; top: 0; right: 0; position: fixed; z-index: 9998; overflow: scroll; border-top: none; padding-top: 60px !important; } .et_mobile_menu li a { color: #fff !important; width: 100%; float: left; border: none !important; text-align: left; margin: 5px 10px; transition: .2s; text-transform: uppercase; font-size: 1.4em !important; } .sub-menu li a{ font-size: 1em !important; } .mobile_nav ul#mobile_menu .current_page_item > a { color: #fff !important; background-color: rgba(255, 255, 255, 0.1); border-radius: 30px; padding-left: 20px; } .mobile_nav.closed #mobile_menu { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background: linear-gradient( rgba(66, 66, 66, 0.50), rgba(66, 66, 66, 0.90) ), /* —— Here you can customize the overlay effect by adding the color you want in rgba format. NOTE: adding two colors you can create a gradient effect —– */ url(“https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg”); /* —– Add here the url of the image you want as background —– */ background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; } .mobile_nav.opened #mobile_menu { -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background: linear-gradient( rgba(66, 66, 66, 0.50), rgba(66, 66, 66, 0.90) ), url(“https://www.needyesterday.com/wp-content/uploads/2018/07/bg_mobile_menu.jpg”); background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; } #main-header .container.clearfix.et_menu_container { width: 100%; } .mobile_menu_bar:before { color: #1b1d1e !important; } .mobile_nav.opened .mobile_menu_bar:before { content: ‘\4d’; z-index: 9999; color: #fff !important; border: 1px solid #fff; width: 30px; height: 30px; margin-right: 20px; border-radius: 50%; } } @media only screen and (max-width: 980px) { .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; } #et-top-navigation { padding-right: 5px; } } @media only screen and (min-width: 481px) { #mobile_menu { width: 340px; margin-left: calc(100% – 340px); } } @media only screen and (max-width: 480px) { #mobile_menu { width: 290px; margin-left: calc(100% – 290px); } }

8. Estilo Slide-In de SJ James di Divi.Space

Este é m estilo Slide-in criado por SJ James Divi.Space, um exemplo fantástico de como pode ser personalizado o menu mobile do Divi para um resultado simplesmente fantástico. Repara na animação que abre e fecha o menu, realmente fantástica!

 

9. Style Sleeker de James Fosker da DiviStride

Outro estilo que quero mostrar foi criado por James Fosker  da DiviStride . O Sleeker tem um design clean e muito bacana, perfeito para um cardápio com muitos itens.

 
 

 

Mais seis snippets CSS

Aqui temos os seis snippets CSS reunidos em um só lugar.

Passo a passo

  1. Faça login no WordPress e vá para Divi> Theme Customizer> Custom CSS
  2. Cole o seguinte código CSS:
/ * Texto à esquerda do hambúrguer no Theme Builder * /
.et_mobile_nav_menu:before {
content: ‘MENU’;
position: absolute;
right: 40px;
}
 
/ * Texto à esquerda de hambúrguer em Divi 3 * /
#et_mobile_nav_menu:before {
content: ‘MENU’;
position: absolute;
right: 33px;
bottom:30px;
}
 
/ * Ícone X no menu móvel expandido * /
.mobile_nav.opened .mobile_menu_bar:before {
content: “\4d”;
}
 
/ * Remova a linha superior do menu móvel * /
.et_mobile_menu {
border-top:0px;
}
 
/ * Itens de menu mobile alinhados ao centro * /
 
.et_mobile_menu li {
text-align:center !important;
}
 
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}
 
/ * Tornar o menu móvel em largura total * /
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}
 
/ * Aumentar a altura total do menu móvel * /
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
 
html {
height: -webkit-fill-available;
}
 

2. Save.
 

Loading