Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1083787

    In the Enfold Photography template (https://kriesi.at/themes/enfold-photography/), how do you activate the burger navigation sooner then 768px with media query?

    CSS used on post https://kriesi.at/support/topic/enfold-mobile-burger-menu-breaking-point/ does not work…

    I have doubled checked my settings in Enfold > Main Menu > General panel…

    • This topic was modified 1 year, 4 months ago by  Phet.
    #1083849

    Hey Phet,

    Thank you for contacting us.

    To activate the burger menu at custom screen width please check the below link

    https://kriesi.at/documentation/enfold/menu/#burgermobile-menu-activation > Custom Screen Width

    Best regards,
    Vinay

    #1084173

    Thanks for the reply Vinay.

    I think I did not explained myself properly.

    I was hoping to activate the mobile header (ie. header that apperes on phones) but at a tablet width (ie. 1024px).

    This is the header I would like to display on tablet size screen : https://imgur.com/MdIYF4F

    Mobile header

    But, with the CSS I’ve used in your link, it only displays the burger menu : https://imgur.com/tZ9LQdF

    Tablet

    Thanks again for your help!

    #1085626

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
    @media only screen and (max-width: 990px){
    .responsive #top #wrap_all #header {
        position: relative;
        width: 100%;
        float: none;
        height: auto;
        margin: 0 !important;
        opacity: 1;
        min-height: 0;
    }
    .responsive #top .av-main-nav .menu-item {
        display: none;
    }
    .responsive #top .logo {
        position: static;
        display: table;
        height: 80px !important;
        float: none;
        padding: 0;
        border: none;
        width: 80%;
    }
    .responsive .logo img {
        height: auto !important;
        width: auto;
        max-width: 100%;
        display: block;
        max-height: 80px;
    }
    .responsive #top #wrap_all .container {
        width: 85%;
        max-width: 85%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none;
    }
    .responsive #top .av-main-nav .menu-item-avia-special {
        display: block;
    }
    .responsive #top #wrap_all .main_menu {
        top: 0;
        height: 80px;
        left: auto;
        right: 0;
        display: block;
        position: absolute;
    }
    .responsive.html_header_left #main {
        margin-left: 0;
    }}
    
    
    

    Best regards,
    Yigit

    #1087141

    Hey Yigit,

    Thanks for the code. Had some tweaking to do, but it did get me started on the right path.

    Thanks again!
    Phet

    #1087185

    Hi,

    Glad we could help! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Yigit

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

The topic ‘Change media break to activate Burger Menu in Enfold Photography’ is closed to new replies.