We announce the release of NewsCard Pro with lots of features. View beautifuldemos

Menu burger sur tous support

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  Theme Horse Support Team 1 week, 2 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #61744

    delph006
    Participant

    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

    #62047

    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!

    #62052

    delph006
    Participant

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

    #62282

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.