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

    In the Enfold Photography template (, how do you activate the burger navigation sooner then 768px with media query?

    CSS used on post 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.

    Hey Phet,

    Thank you for contacting us.

    To activate the burger menu at custom screen width please check the below link > Custom Screen Width

    Best regards,


    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 :

    Mobile header

    But, with the CSS I’ve used in your link, it only displays the burger menu :


    Thanks again for your help!



    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,


    Hey Yigit,

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

    Thanks again!



    Glad we could help! :)

    For your information, you can take a look at Enfold documentation here –
    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,

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.