[delph006]

Bonjour,

Lorsque j’ouvre mon site sur un téléphone, le menu passe en menu burger.

Je souhaite avoir ce type de menu sur tous support c’est à dire même sur grand écran. Comment dois-je modifier ceci ?

Dans l’attente de vous lire,

Cordialement

[Theme Horse Support Team]

Hi,

Please paste below custom CSS code in Appearance > Customize > Additional CSS to have the burger menu on desktop as well.

@media (min-width: 992px) {
    .navbar-expand-lg {
        -webkit-box-orient: inherit;
        -webkit-box-direction: inherit;
        -ms-flex-flow: inherit;
        flex-flow: inherit;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .navbar-expand-lg>.container, 
    .navbar-expand-lg>.container-fluid {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
    .navbar-expand-lg .navbar-collapse {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        overflow: hidden;
        height: 0;
        display: block !important;
    }
    .navbar-expand-lg .navbar-collapse.show {
        display: block !important;
        height: auto;
    }
    .navbar .main-navigation {
        border-top: 1px solid #eeeeee;
        margin-right: 0;
        display: block !important;
    }
    .main-navigation li {
        display: block;
    }
    .main-navigation li + li {
        border-top: 1px solid #eeeeee;
    }
    .main-navigation a,
    .main-navigation .dropdown-menu a, 
    .main-navigation li ul a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .main-navigation .search-toggle {
        display: none !important;
    }
    .main-navigation li .dropdown-menu a,
    .main-navigation li ul li a{
        padding-left: 30px;
    }
    .main-navigation li ul li ul li a{
        padding-left: 60px;
    }
    .main-navigation .dropdown-menu, 
    .main-navigation li ul {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        display: block;
        border-width: 1px 0 0;
    }
    .main-navigation ul li ul li ul, 
    .headernav .main-navigation ul li ul li ul {
        left: auto;
    }
    .main-navigation ul li ul, 
    .main-navigation ul ul li ul, 
    .main-navigation ul ul ul li ul, 
    .main-navigation ul ul ul ul li ul, 
    .main-navigation ul ul ul ul ul li ul {
        display: block;
    }
    .main-navigation ul li ul, 
    .main-navigation ul li:hover ul ul, 
    .main-navigation ul ul li:hover ul ul, 
    .main-navigation ul ul ul li:hover ul ul, 
    .main-navigation ul ul ul ul li:hover ul ul {
        display: block;
    }
    .main-navigation .dropdown-menu,
    .main-navigation li:hover .dropdown-menu {
        display: none;
    }
    .main-navigation .show > .dropdown-menu,
    .main-navigation .show:hover .dropdown-menu {
        display: block
    }
    .main-navigation .dropdown-menu a:hover, 
    .main-navigation .dropdown-menu a.current-menu-item, 
    .main-navigation li ul li:hover > a, 
    .main-navigation li ul .current-menu-item > a,
    .main-navigation li ul li.current-menu-ancestor > a {
        background-color: transparent;
    }
}

Thank you!

[delph006]

Super merci, ça marche sauf que le menu s’affiche à gauche et je voudrais qu’il soit à droite. Que dois-je modifier ?

[Theme Horse Support Team]

Hi @delph006,

To change menu from left to right side then please add the below custom CSS code again to end of the same code we provided before.

.main-navigation a {
	text-align: right;
}
.main-navigation li .dropdown-menu a,
.main-navigation li ul li a{
	padding-left: 15px;
	padding-right: 30px;
}
.main-navigation li ul li ul li a{
	padding-left: 15px;
	padding-right: 60px;
}

Thanks

[Author]

Posts